SASS updated version

The deprecation warning you're seeing is because the @import rule in Sass is being phased out in favor of the more modern @use and @forward rules. The @import rule will be removed in Dart Sass 3.0.0, so it's a good idea to start transitioning your code now.

Here's how you can update your imports using @use:

1. Create a Module File: If you have multiple files that you want to import, you can create a single file (e.g., _index.scss) that uses @forward to gather all your partials.

   // _index.scss
   @forward '_custom-FE';
   @forward '_animation-index';
   @forward '_animation-webport';
   @forward '_animation-design';
   @forward '_animation-service';
   @forward '_animation-blog';
   @forward '_animation-contact';
   

2. Use the Module in Your Main File: In your main app.scss file, you can then use the @use rule to import the module file.

   // app.scss
   @use 'index';
   

3. Adjust Variable, Mixins, and Functions: When using @use, all variables, mixins, and functions are namespaced by default. If you need to access them, you'll need to use the namespace. For example, if _custom-FE has a variable $color, you would access it as index.$color.

4. Direct Use: If you don't want to create an index file, you can directly use each file in your app.scss:

   // app.scss
   @use '_custom-FE';
   @use '_animation-index';
   @use '_animation-webport';
   @use '_animation-design';
   @use '_animation-service';
   @use '_animation-blog';
   @use '_animation-contact';
   

Remember, with @use, you might need to adjust your code to account for the namespacing. If you want to avoid namespacing, you can use @use 'module' as *;, but this is generally not recommended as it can lead to naming conflicts.

For more detailed information, you can refer to the Sass documentation on @use.