Sass (Syntactically awesome style sheets), aka CSS with superpowers, is a preprocessor, which makes developing styles for our projects much easier, more enjoyable, and faster. It also allows us to significantly improve the code structure itself, to use variables and create reusable elements (mixins, placeholders). The maintenance of such code is much easier.
Learning Sass (SCSS) quickly
We already mentioned about Sass in the previous articles about CSS structure and methodologies:
– part I
– part II
See also:
https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
Learning Sass for what?
Well, writing CSS is simple. Writing maintainable CSS for larger projects is hard. We need tools and approaches, that will simplify, improve and make our work faster. And simply will put programmers on the right way. One of such tools is old, good Less CSS. However I don’t use it since long time. Instead I work with Sass, which is my favorite.
A good example comes also from Bootstrap 4, which in the past was written using Less, but the latest version (4) is written with Sass.
OK, so… whole preprocessing helps us to make writing CSS more similar to “normal” programming, where we have such constructions as variables and functions. Cool? Sure thing!
Example — variables:
// some-file.scss
$my-color: #333444;
p {
color: $my-color;
}
Certainly we can perform arithmetic operations on variables.
With Sass we place the code in the partials / files, according to their purpose. We keep the order. And the whole finally will appear to us, as a ready-made CSS file(s).
Example:
sass –watch input.scss output.css
Of course we don’t have to do it manually. There are automation tools. And even better — if we use web framework, probably there is an easy way to integrate and automate dealing with Sass. I use Ruby on Rails for example. Then also webpack, es6, vue.js and… let the magic happen.
By the way, we can expand the configuration, for example to use auto-prefixer, and don’t have to worry about CSS prefixes for different browsers. The tool will handle that for us:
https://autoprefixer.github.io
Go!
Let’s master using variables, nesting and mixins. Actually the nutshell guide (Sass in pill), available here:
will be enough to start writing Sass codes effectively.
Can learning Sass last 15 minutes? Apparently, yes:
http://tutorialzine.com/2016/01/learn-sass-in-15-minutes
Similar articles also here:
https://scotch.io/tutorials/getting-started-with-sass
http://www.hongkiat.com/blog/getting-started-saas
https://www.tutorialspoint.com/sass
Going further, it will be good to go deeper into the complete documentation:
https://sass-lang.com/documentation/file.SASS_REFERENCE.html
What else? Bourbon!
Bourbon
Unfortunately, it’s not a glass of bourbon, that would be good for programmers sometimes 😉
It’s about http://bourbon.io — a Sass library, which brings us mixins, functions — so pre-defiend extras, that may support us and speed up our efforts. Everything cross-browser of course.
It’s worth of checking out, as Bourbon may already have implemented the things we need:
https://www.sitepoint.com/getting-started-sass-bourbon
Bourbon is not the only solution of this type:
http://www.hongkiat.com/blog/mixin-library-for-sass
Syntax — .sass vs .scss
We already talked about that in one of the previous articles. Sass gives two variants of the syntax. Well, there are various preferences, but the most basic thing is to keep chosen syntax constantly. Besides using .scss instead of .sass is recommended in good practices guide:
More about the differences:
https://www.sitepoint.com/whats-difference-sass-scss
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
http://www.wrock.org/css-vs-scss-vs-sass-what-is-difference-between-them
See also:
https://www.sitepoint.com/sass-features-may-never-tried
Mixin vs placeholder? A small difference, which is good to know:
https://www.sitepoint.com/sass-mixin-placeholder
http://krasimirtsonev.com/blog/article/SASS-mixins-extends-and-placeholders-differences-use-cases
Sass variables in JavaScript (Rails)
More resources? Awesome Sass is a really nice set:
https://github.com/Famolus/awesome-sass
Geek level — lodash implemented in Sass:
http://davidkpiano.github.io/sassdash/sassdoc/index.html
Summary
Sass is a powerful tool when it comes to productivity, as well as the comfort of the programmers themselves. It is certainly worth taking a moment to master it, especially since we it actually won’t take too long. The benefits can be large. Sass now!
Posted in 
Tags: 
