Menu
Naming Conventions. General rules for naming conventions apply to variables, functions, and mixins. When naming anything in Sass it's recommended to use all lowercase letters with dashes for separation. Sass code syntax is actually based on the CSS guidelines ruleset.
Advantages of SCSSIt facilitates you to write clean, easy and less CSS in a program construct. It contains fewer codes so you can write CSS quicker. It has very good documentation, meaning that you can get all the required information online. It provides nesting so you can use nested syntax.
scss files, Sass can import plain old . css files. The only rule is that the import must not explicitly include the . css extension, because that's used to indicate a plain CSS @import .
The _ (underscore) is a partial for scss. That means the stylesheet its going to be imported (@import) to a main stylesheet i.e. styles.scss. The advantage on using partials is that you can use many files to organize your code and everything will be compiled on a single file.
A sass file starting with an underscore is a partial. It is a good way to keep your styles separated into logical sections. These files all get merged on compilation when you use @import.
From the Sass language guide:
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.
http://sass-lang.com/guide
When you include "_" in front of the file name, it won't be generated into CSS unless you import it into another sass files which is not partial.
suppose your folder structure is like this
/scss
style.scss
_list.scss
/css
if you run the command
sass --watch scss:css
only style.css and style.css.map files will be created, sass compiler will omit _list.scss without converting its content into a CSS file.
/scss
style.scss
_list.scss
/css
style.css
style.css.map
the only way that you can use partials is to import them into another .scss file with
@import 'list.scss';
if you remove the '_' in front of _list.scss the outcome of the command will be
/scss
style.scss
list.scss
/css
style.css
style.css.map
list.css
list.css.map
The main purpose of using partials is to break down our CSS code into several pieces which are easier to maintain. Hope this helps. Thanks.
Files with _ (underscore) are ignored by compiler. However, all those files are imported into single, main SCSS file (i.e. styles.scss) which is actually the file that is compiled (it doesn't have _ (underscore) in it's name)
The final goal is to compile only one SCSS file, and to have only one CSS file as a result of that, which has various advantages.
_ is used to denote partials. These partials contains the variables and internal functions that are required in the pre-processing stage, and they are not required to be compiled as css. _ partial templates contains utils, scss local variables and functions required in the compilation of the scss to css.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With