sass import partials vs non-partials

Question

Related to this question, most of the questions is about CSS import vs SASS import.

My question is more of under the same SASS import, is there a difference between defining the sass file to be partials or non-partials?

https://www.w3schools.com/sass/sass_import.asp

As mentioned at above link,

By default, Sass transpiles all the .scss files directly. However, when you want to import a file, you do not need the file to be transpiled directly.

Sass has a mechanism for this: If you start the filename with an underscore, Sass will not transpile it. Files named this way are called partials in Sass. So, a partial Sass file is named with a leading underscore:

I dont quite understand what it means for the quoted text, would be great if the answer can list the reason why would I want to use partials vs non partials, under SASS import

Answer 1

If I understand your qestion correctly, here is answer:

If the Sass transpiler is watching a directory (either through the command window or via an editor extension), you'll want to exclude changes to these files from transpilation, and Sass makes it easy to do so. Just prepend an underscore to their names.

Source: https://www.tutorialsteacher.com/sass/import-files-and-partials

Let's say you use:

"scss": "sass web/assets/scss/main.scss web/assets/css/main.css --style=compressed --watch"

When transpiller watching changes in main.scss where you importing files, then you get output in main.css. Then it does not matter if you import partials or not.

If you watch a directory, for example:

"scss": "sass web/assets/scss/ web/assets/css/ --style=compressed --watch"

Then, if you don't use partials, you will get every file separate in addition.

Answer 2

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:

1. You can build a modular structure
2. 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.