Sass is a great little helper for dealing with complex CSS and extending functionality, come along and learn about SASS.
Note: I gave myself little challenges you are welcome to try if you want to recreate my own learning curve.
Challenge: Import and display some html styled in Sass Syntax ( Both of them ! )
The first thing I feel I need to clarify, is that there are 2 (Two) different ways to write SASS, let’s check out both with a simple example, this example will also show how to nest Css selectors,( a Sass feature), let’s start with the result:
The main differences in between syntax styles:
As for which one to use, it is up for debate, currently( Mid-Late 2016), I believe Scss is slightly more popular with the crowd and Sass is more of a niche, so in the interest of setting you ( dear reader) for success, I’ll use only SCSS going forward
One of the biggest things you can do with Sass, is define and use variables, let’s check how:
Challenge: Define and use at least 2 Sass variables.
As you can see, you declare and use variables with the dollar sign $ , this is super handy when you have complex sites with tons of elements and you want to change some related colors for instance.
Challenge: create 2 variables that use different data types and use them
And the rest (from the docs) :
So far so good,things start getting more complex and useful once you consider that Sass add the ability to do operations within Css, let’s start with some basic ones:
Challenge: Use some Basic operations in Sass
A slightly more complex (but awesome ) use of operations in Sass is with conditionals:
Challenge: Create a conditional in Css with Sass !
This being an introduction, I’ll leave with a simple conditional, but there is more, you can use @if, @for, @each and @while control structures as well !
Another cool feature of Sass is the included functions
Challenge: Use a Sass function, any function.
And for an advanced related topic, you can also create your own Sass functions
As their name implies, imports allow you to add another chunk or segment of CSS ( CSS already allows imports, but Sass generates a single file, so you can save on requests).
Challenge: Import some Css into a Sass file.
Note: the above is just an example using plain Css Imports ( due to how codepen works), in a local environment you would us something like:
Check the rest of the Sass Import documentation for more.
And last but not least,let’s take a look at mixins, what’s a mixin you ask ? good question….
Challenge: Figure out what a mixin is and make and use one.
A mixin is a just a collection of css declarations you can then later reuse, you can make mixins for vendor prefixes, small and large components and other useful bits of css, you define them with @mixin and use them with @include but there’s more, you can also add arguments and thus make them into function ! let’s try that:
Challenge: Create a mixin with arguments and use it.
And that’s that, you can check the documentation for more about making your own mixins with arguments
Things I didn’t cover/further challenges: Other directives like @function and control directives, extending Sass, lists and maps and complex mixins, plus the sass ecosystem.
Sass does give css super powers as they say, it takes a little getting used to the syntax and wrapping your head around the new css functionality, but if you learn it you will become more productive, it is also worth mentioning that some of the Sass functionality is being slowly incorporated into css, but it’s still worth to learn sass since there is a healthy ecosystem of libraries that build on top of sass to make Front End development better and faster.