28. Sass

Sass is a CSS preprocessor which, as its own website indicates, gives superpowers to our styles. On one hand it lets you use future styles or ones that are not yet compatible with all browsers. On the other hand you can have variables, do operations, import other CSS, embed styles inside other styles, help you calculate colors... and a long etcetera. Without a doubt an indispensable tool for any self-respecting Web Designer.

Variables

Sass

$fuenteGeneral: Helvetica, sans-serif
$colorFondo: #333

body
   font-family: $fuenteGeneral
   background-color: $colorFondo

compiles to...

CSS

body {
    font-family: Helvetica, sans-serif;
    background-color: #333;
}

Nesting

Sass

nav
    ul
        margin: 0
        padding: 0
        list-style: none
    li
        display: inline-block
    a
        display: block
        padding: 6px 12px
        text-decoration: none

compiles to...

CSS

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

Sass

div
    text-decoration: none
    &:hover
        color: pink

compiles to...

CSS

div {
    text-decoration: none;
}

div:hover {
    color: pink;
}

Imports

Sass

We create a file with the name _reset.sass

html, body, ul, ol
    margin: 0
    padding: 0

Another one with the name base.sass

@use "reset"

body
    font-size: 14px
    background-color: #efefef

Both will compile into...

CSS

html, body, ul, ol {
    margin: 0;
    padding: 0;
}

body {
    font-size: 14px;
    background-color: #efefef;
}

When you want to use variables, functions, or mixins hosted in another file, you will have to work with the structure file.property.

_theme.sass

$color--primario: red

base.sass

@use "theme"

a
    color: theme.$color--primario

Do not use @import since it is discontinued and discouraged by the developers. This is because it produces collisions between variables since everything becomes global, including functions and mixins.

Mixins

Sass

@mixin tamanyo($anchura)
    width: $anchura

.box
    @include tamanyo(10px)
    height: 50px

compiles to...

CSS

.box {
    width: 10px;
    height: 50px;
}

Alternative with two input parameters.

Sass

@mixin tamanyo($anchura, $altura)
    width: $anchura
    height: $altura

Defining a default value.

@mixin tamanyo($anchura, $altura:50px)
    width: $anchura
    height: $altura

Extend

Sass

.redesSociales
    border: 1px solid #ccc
    padding: 10px
    color: #333

#twitter
    @extend .redesSociales
    background-image: url(../img/twitter.png)

compiles to...

CSS

.redesSociales {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

#twitter {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
    background-image: url(../img/twitter.png);
}

Operators

Values we can use:

Sass

#banner
    float: left
    width: 600px / 960px * 100%

compiles to...

CSS

#banner {
    float: left;
    width: 62.5%;
}

Breakdown

Sass

#banner
    float: left
    backgroud:
        color: navy
        size: cover
        position: center

CSS

#banner {
    float: left;
    backgroud-color: navy;
    backgroud-size: cover;
    backgroud-position: center;
}

Helper functions

darken(#800, 20%)
// #200

lighten(#800, 20%)
// #e00

transparentize(#e48400, .2)
// rgba(228, 132, 0, 0.8)

rgba(#e48400, .2)
// rgba(228, 132, 0, 0.2)

saturate(#855, 20%)
// #9e3f3f

grayscale(#855)
// #726b6b

complement(#855)
// #588

Compile

The browser is unable to interpret Sass, which is why we need to transform it into CSS. To compile we have a multitude of options, whether free, gratis, or paid; and for all operating systems.

• Prepros (Paid): My favorite: fast to use, highly configurable, comes with a preinstalled web server with auto-reload, supports other compilers (Typescript, CoffeScript, Pug, Slim...), and lets you create compilation workflows (Does Gulp ring a bell? Well, graphically). From professionals for professionals.
• Koala (Open Source): Easy to use and suitable for all platforms. I have had good experiences on Windows but not on Mac OS.
• CodeKit (Paid): If you have Mac OS don't miss the chance to look into it. It performs several interesting tasks such as optimizing images.
• Scout-App (Open Source): Similar to Koala. Drag the folder where your website is and that's it.

In case you want to use the terminal, you will need the npm/yarn package node-sass.

To install the compiler you can use the following command.

npm install node-sass

Running it is simple.

node-sass <input> <output>

An example.

node-sass main.sass main.css