Learning Sass (SCSS) quickly

Level: intermediate

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:

https://sass-lang.com/guide

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:

http://bourbon.io/docs

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:

https://sass-guidelin.es

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!

Responses are currently closed, but you can trackback from your own site.

Comments are closed.