SASS — Learn the fundamentals
Sass is an extension of CSS that adds power and elegance to the basic language. Together we will explore Sass and learn its concepts.
Before we begin, let’s understand what the difference between SASS and SCSS is.
The language Sass (Syntactically Awesome Style Sheets) has two writing syntaxes: SASS and SCSS.
The SASS syntax is an older syntax. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties.
Files using SASS syntax have the .sass extension while files using SCSS syntax have the .scss extension.
Now that we got that clear, let’s explore the benefits brought by the Sass language.
Sass allow you to use:
- variables
- Nested rules
- Mixins/placeholders
- Control directives
- and more.
- Sass variables
Think of variables as a way to store information that you want to reuse throughout your stylesheet.
You can store things like font stacks, colors or any CSS value you think you’ll want to reuse.
- Sass nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
To refer to the current selector context you use the (&) selector.
Nesting makes our CSS organized and easier to see the hierarchy, but you should not misuse it by over-nesting selectors.
The best advice to not misuse it, is to never go more than four levels deep.
- Sass Mixins / placeholders
Mixins allow you to define styles that can be re-used throughout the stylesheet. It can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allow you to produce a wide variety of styles with very few mixins.
Placeholders allow you to use @extend to inherit styles. Those styles act like silent classes in that they won’t compile to CSS unless they’re extended and used by another selector.
So the question is: which one should you use?
Well, it depends. It depends on the context and what you are ultimately trying to do. The best advice would be:
If you need variables, use a mixin. Otherwise, extend a placeholder.
- Sass Control directives
Sass control directives are @while, @for, @each and @if.
They are used in Sass to include styles only under some conditions or to include the same style several times with variations. Control directives are an advanced feature and exist mainly for use in mixins.
· The @while directive takes an expression and executes the nested block of styles as long as the expression is not evaluated to false.
· The @for directive lets you output styles in a loop.
While through loops and includes the end point, to does not include the end value.
· the @each directive will execute a set of items in either a list or a map.
LIST
MAP (A map is treated as a list of pairs)
· @if, @else if and @else allow you to include Sass code in the CSS output only if certain conditions are met.
Conclusion
I hope you found this article helpful and insightful. Though there are many more benefits SASS brings to CSS than we discovered today. I encourage you to check out their documentation as it has a large community, and it is well documented.
Thank you for reading, I would appreciate your applause and sharing :-)
For more articles, check out the links below:
