Scss is a preprocessor that allows us to use features that are not part of css standards, it also provides a good workflow to maintain our stylesheets.
Scss helps us to reduce our code and we don’t repeat our code often as we tend to do while using css as scss flows the principle of DRY(Don’t Repeat Yourself)
Parsing a Stylesheet
A stylesheet is parsed from a sequence of Unicode code points. It's parsed directly, without first being converted to a token stream.
It’s often that a document is initially available only as a sequence of bytes, which is decoded into Unicode. Sass performs this decoding as follows:
If the sequence of bytes starts with the UTF-8 or UTF-16 encoding of U+FEFF BYTE ORDER MARK, the following encoding is used.
If the sequence of bytes starts with the plain ASCII string @charset, Sass determines the encoding using step 2 of the CSS algorithm for determining the fallback encoding.
Otherwise, we use UTF-8.
When Sass encounters invalid syntax in a stylesheet, parsing will fail and an error will be shown to the user with information about the occurrence of the invalid syntax and the reason it was invalid.
Note that this is different from CSS, which specifies how to recover from most errors rather than failing immediately. This is one of the few cases where SCSS isn’t strictly a superset of CSS. However, it’s much more useful to Sass users to see errors immediately, rather than having them passed through to the CSS output.
We assign a value to a name that begins with
$,and the we refer to the name instead of the value. The variable declaration looks like property declaration, To use a variable, just include it in a value.
Style rules are the basis of scss as they are for css, they work the same way as in css.
We choose the elements to style with the selector and declare the properties.
Rather than repeating the same selectors again, you can write one style rules inside another. Sass will automatically combine the outer rule’s selector with the inner rule’s.
A few things in CSS are somewhat dreary to compose, particularly with CSS3 and the numerous seller prefixes that exist. A mixin lets you make groups of CSS declarations that you need to reuse all through your site. You can even go in qualities to make your mixin increasingly adaptable. A decent utilization of a mixin is for seller prefixes. Here's a model for change.
Folder Structure of SCSS
Here we have 3 partials connecting up to our styles.scss
Base: contained within this file are all your resets, variables, mixins, and any utility classes.
Layout: contains all the CSS that handles the layout, such as the container and any grid systems.
Components: anything reusable such as buttons, navbars, cards etc.
Main: it should ONLY contain the imports for the above files.