You can use either @import or @use in your SASS files.
When you have a look at the current best practices in SASS, we have a folder structure like this (see: Sass Guidelines):
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| … # Etc.
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc.
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass file
As you can see, all SASS files begin with an underscore _, except the main.scss. All partial files are imported by the main file. There are two benefits:
- You can build a modular structure
- You need to transpile only one SCSS file (
main.scss).
Example:
sass sass\main.scss css\main.css
Important:
The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.
(see: SAass: @import)
When you use @import to import all partials into your main file, they share one namespace. So when you use $myvar in two partials, the last imported variable will override it. Because of this you should prefer @use now, which creates a separate namespace for each partial file, e.g. mixins.$myvar, reset.$myvar.
