A CSS preprocessor is a tool (or program) to dynamically generate CSS files. The goal is to improve the writing of these files, bringing more flexibility to the web developer.

The most commonly used CSS preprocessors are Sass , Less PostCSS and Stylus.

As part of this article, I made the choice to only cover the preprocessor “Sass” , largely majority among web developers at the moment. Indeed, very large websites, including Apple, BBC, Yelp, Twitter, The Guardian, Salesforce, 6play, RTL, Fun Radio, Behance to name but a few, are integrated via Sass.

Whatever you choose, the difference between preprocessors will usually be quite minimal.

To make your hand, know that Sass offers a Sandbox for the less successful: sassmeister

To begin, remember what a preprocessor is and what it will bring in your daily lazy integrator (which is a compliment in my mouth):

  1. ❤ variables to gather your colors, spacing, font sizes, etc.
  2. a nested notation to “modularize” CSS
  3. simple operations and functions to darken, lighten, treat colors, perform calculations, etc.
  4. customized functions for your specific needs, with loops, parameters, conditions, etc.
  5. and many other things

How to compile in CSS?

A preprocessor is a meta-language that needs to be compiled in “normal” CSS to be interpreted by a browser. It is therefore necessary to introduce a compilation step, where a mill will take over the transformation Sass in CSS.

This step can be carried out in several ways, the most common of which are:

  • A graphical application: Prepros, Codekit, Koala, Scout, etc.
  • A plugin editor: Sass autocompile (Atom), Sass Sublime (Sublime Text), Brackets Sass (Brackets), etc.
  • Using task runners: Gulp, Grunt, Brunch, etc.
  • Online: Sassmeister, Pleeease, Lesstester, etc.

Sass File Extensions

A Sass file will have an extension .scss(formerly .sass whose syntax was farther from CSS). Here are some examples:

styles.scss
kiwi.scss

Will be compiled into:

styles.css
kiwi.css

variables

A Sass variable is composed of a prefix $, the name of the variable, the separator :and the value of the variable. All this is very close to the CSS language and should not shock you.

Thus, the following variables:

$unicorn: yellow;
$kitten: pink;

Used in the following rules:

div {
  color: $unicorn;
}
p {
  background: $kitten;
}

Will be compiled as follows:

div {
  color: yellow;
}
p {
  background: pink;
}
Local and global variables

The scope of variables is contextual to their environment.

styles.scss:

$base-color: pink;

.unicorn {
  $base-color: yellow;
  color: $base-color;
}
.kitten {
  color: $base-color;
}

Will be compiled into:

.unicorn {
  color: yellow;
}
.kitten {
  color: pink;
}

It is possible to modify the scope of a variable by giving it a suffix!defaultor!global

Importing “partials” files

The “partials” are prefixed files of an underscore (the famous “dash of 8”:) in _order not to be compiled and not to appear in the list of generated CSS files.

The file is imported using the directive @import. The underscore (_ ) character and the extension type ( .scss) are not required in the import declaration.

_variables.scss:

$base-color: pink;

styles.scss:

@import "variables";
.unicorn {
  color: $base-color;
}

Will be compiled into a single styles.css file:

.unicorn {
  color: pink;
}

Nesting Rules

The rules of a Sass stylesheet can be nested, which facilitates the integration methodology in the form of modular CSS.

styles.scss:

.row {
  h2 {
    color: $main-color;
  }
  .is-active {
    background-color: #EEE;
  }
}

Will be compiled into:

.row h2 {
  color: pink;
}
.row .is-active {
  background-color: #EEE;
}

Selector «  & »

The selector &is called the “parent selector” in Sass. Its role is multiple and very practical, see for yourself …

styles.scss:

.kitten {
  .is-cute { … }
}
.kitten {
  & .is-cute { … }
}
.kitten {
  &.is-cute { … }
}
.kitten {
  .is-cute & { … }
}

Will be compiled into:

.kitten .is-cute { … }

.kitten .is-cute { … }

.kitten.is-cute { … }

.is-cute .kitten { … }

And :

a {
  background: pink;
  &:focus, &:active, &:hover {
    text-decoration: overline;
  }
}

Will become:

a {
  background: pink;
}
a:focus, a:active, a:hover {
  text-decoration: overline;
}

Integrated functions

A very large number of simple functions ( listed below ) is integrated into the Sass language. They allow you to manipulate colors, numbers or strings.

styles.scss:

$base-color: pink;

p {
  color: lighten($base-color, 10%);
  color: darken($base-color, 10%);
  color: transparentize($base-color, 0.5);
}

Will be compiled into:

p {
  color: #fff3f5;
  color: #ff8da1;
  color: rgba(255, 192, 203, 0.5);
}

@extend%placeholderandmixin

The directive @extend

Sass offers the possibility to reuse pieces of CSS (“snippets”) thanks to the directive @extend.

styles.scss:

.border {
  border: 2px solid pink;
}
.link {
  @extend .border;
}
.article a {
  @extend .border;
}
.title a {
  @extend .border;
}

Will be compiled into:

.border,
.link,
.article a,
.title a {
  border: 2px solid pink;
}

The %placeholder

The behavior of one %placeholderis substantially identical to that of one @extendexcept that it will not be compiled and will not appear within the generated CSS classes.

styles.scss:

%border {
  border: 2px solid pink;
}
.link {
  @extend %border;
}
.article a {
  @extend %border;
}
.title a {
  @extend %border;
}

Will be compiled into:

.link,
.article a,
.title a {
  border: 2px solid pink;
}

The mixin

Another variant close to %placeholderand from @extendthe mixin is mainly used to realize its custom functions, equipped with parameters, loops and conditions.

styles.scss:

@mixin border {
  border: 2px solid pink;
}
.link {
  @include border;
}
.article a {
  @include border;
}
.title a {
  @include border;
}

Will be compiled into:

.link {
  border: 2px solid pink;
}
.article a {
  border: 2px solid pink;
}
.title a {
  border: 2px solid pink;
}

With settings, styles.scss:

@mixin color($color) {
   color: $color;
}
.whale {
  @include color(pink);
}
.fish {
  @include color(hotpink);
}

Will be compiled into:

.whale {
  color: pink;
}
.fish {
  color: hotpink;
}

Variable interpolation

The interpolation (or escape) of $variable, noted #{$variable}opens the way to certain manipulation of strings or values.

For example when two values ​​are placed side by side, they will be computed ( font: $font/ $line-height; 
will be compiled in font: 0.4;, depending on the value of the variables of course). However, by interpolating the variables, they will not be kept as they are: font: #{$font}/#{$line-height};will be compiled into font: 12px/30px;.

In the same way, an interpolated character string is stripped of its quotes or double quotes, and two strings side by side will no longer be concatenated but calculated.

So the following Sass tip is invalid :

$name: foo;
$attr: border;
p.$name {
  $attr-color: blue;
}

While the interpolated version is perfectly functional:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

And will be compiled into:

p.foo {
  border-color: blue;
}

Buckles

It is quite simple to design loops in Sass, by cumulating the instructions @forfromand through, among other possibilities.

Here is an example.

styles.scss:

@for $i from 1 through 3 {
  .spacer-#{$i} {
    margin: $i * 1rem;
  }
}

Will be compiled into:

.spacer-1 {
  margin: 1rem;
}

.spacer-2 {
  margin: 2rem;
}

.spacer-3 {
  margin: 3rem;
}

Conditions

Without much surprise, the conditions in Sass are based on the guidelines @ifand @else.

Here is an example where we find a condition in a mixin environment, consisting of parameters and variable interpolation.

styles.scss:

@mixin img($url, $rotation) {
  background: url(#{$url}.png);
  @if $rotation == 0 {
  }  
  @else {
    transform: rotate($rotation);
  }
}

p {
  @include img("kiwi", 10deg);
}

Will be compiled into:

p {
  background: url(kiwi.png);
  transform: rotate(10deg);
}

Conclusion

Sass meta-language brings real comfort in the web developer environment. While waiting for the CSS specifications to fill their gaps (it is in progress for variables or nesting in particular), or that other types of tools such as PostCSS do not take over, the preprocessors remain essential today in our web projects.

This article is only a brief introduction to the potential of Sass. It is of course possible to go much further in its entrenchments, but for this I invite you to consult carefully its official documentation .

To continue this reading, I invite you to consult the document“Sass vs LESS” concocted by BRIAN JACKSON in keycdn blog.

Resources

Author

Am a tech geek.. Do you wanna know more about me..? My contents will do tell you.

Pin It