CSS PREPROCESSORS


CSS, IT'S OK BUT...

WOULDN'T BE NICE TO HAVE...


VARIABLES
NESTING
PARTIALS
IMPORTS
MIXINS
EXTENDS/INHERITANCE
OPERATORS

can do that!



CSS with superpowers

CSS IS OK BUT...

It's unexpresive


CSS

    body {
        background: #F0F0F0;
        font-family: 'Open Sans', helvetica, sans-serif;
    }
    input[type=submit] {
        background: #333;
        border: 1px solid #E6C2A1;
        color: #F0F0F0;
    }
    footer {
        background: #332d29;
        color: #666;
    }

CSS IS OK BUT...

I get it now!


SCSS

    /* COLORS DEFINITIONS */
    $smoke: #F0F0F0;
    $lightBrow: #E6C2A1;
    $darkBrown: #332d29;
    $grey: #666;
    $dark: #333;
    
    /* FONT DEFINITIONS */
    $baseFontFamily: 'Open Sans', helvetica, sans-serif;
    
    body {
        background: $white;
        font-family: $baseFontFamily;
    }
    input[type=submit] {
        background: $dark;
        border: 1px solid $lightBrown;
        color: $smoke;
    }
    footer {
        background: $darkBrown;
        color: $grey;
    }

The SASS WAY


We have variables now.

CSS IS OK BUT...

It's so wordy


CSS

    section .container { 
        background: #333;
    }
    section .container #home { 
        padding: 10px 12px;
    }
    section .container #home div h1 { 
        background: whiteSmoke;
    }
    section .container #home div span,
    section .container #home div p { 
        color: #333;
    }

CSS IS OK BUT...

Nesting means "happy code" 


SCSS

    section .container { 
        background: #333;
        #home {
            padding: 10 12px;
            div {
                h1 {
                    background: whiteSmoke;
                }
                span, p {
                    color: #333;
                }
            }
        }
    }

The sass way


We have nesting now.

CSS IS OK BUT...

If we separate the files, we get tons of http requests, otherwise we would have a extremely long file.

More requests = Less speed

The sass way


With partials we can separate stylesheet as we want without having to worry about those http request.

The output will be a single css file.

We have partials now.

THE SASS WAY


Partials files are represented like: _filename.scss

IMPORTS

How to include partials


SCSS

// _variables.scss
$lightSmoke: rgb(245, 245, 245);

// _header.scss
header {
    background: $lightSmoke;
}

// main.scss
@include "variables";

.container {
    @include "header";
}

@imports are not just for partials. As a matter of fact, for anything you or someone want to modularize. 

IMPORTS

SASS has a lot of libraries and frameworks ready to be used

CSS IS OK BUT...

It's really repetitive


CSS
.options .share-button{
  background-image: url(/static/img/icon-share.png);
  background-image: url(/static/img/icon-share.svg);
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .add-to-collection{
  background-image: url(/static/img/icon-add.png);
  background-image: url(/static/img/icon-add.svg);
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .delete-button{
  background-image: url(/static/img/icon-delete.png);
  background-image: url(/static/img/icon-delete.svg);
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
} 

CSS IS OK BUT...

Sass can copy&paste things for you!


SCSS
@mixin option-button ($backgroundPng, $backgroundSvg) {
  background-image: url($backgroundPng);
  background-image: url($backgroundSvg);
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .share-button{
  @include option-button(/static/img/icon-share.png, /static/img/icon-share.svg);}
.options .add-to-collection{
  @include option-button(/static/img/icon-add.png, /static/img/icon-add.svg);
}
.options .delete-button{
  @include option-button(/static/img/icon-delete.png, /static/img/icon-delete.svg);
} 

CSS IS OK BUT...

Maybe not that repetitive but still...


CSS
.options .share-button,
.options .add-to-collection,
.options .delete-button {
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .share-button{
  background-image: url(/static/img/icon-share.png);
  background-image: url(/static/img/icon-share.svg);
}
.options .add-to-collection{
  background-image: url(/static/img/icon-add.png);
  background-image: url(/static/img/icon-add.svg);
}
.options .delete-button{
  background-image: url(/static/img/icon-delete.png);
  background-image: url(/static/img/icon-delete.svg);
} 

CSS IS OK BUT...

Such DRY...


SCSS
.option-icon-base {
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .share-button{
  @extend .option-icon-base;
  background-image: url(/static/img/icon-share.png);
  background-image: url(/static/img/icon-share.svg);
}
.options .add-to-collection{
  @extend .option-icon-base; 
  background-image: url(/static/img/icon-add.png);
  background-image: url(/static/img/icon-add.svg);
}
.options .delete-button{
  @extend .option-icon-base;
  background-image: url(/static/img/icon-delete.png);
  background-image: url(/static/img/icon-delete.svg);
} 

CSS IS OK BUT...

Or even better...


SCSS
@mixin backgroundImage($imagePng, $imageSvg) {
  background-image: url($imagePng);
  background-image: url($imageSvg);
}
.option-icon-base {
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  padding-top: 60px;
  height: 80px;
}
.options .share-button{
  @extend .option-icon-base;
  @include backgroundImage(/static/img/icon-share.png, /static/img/icon-share.svg);
}
.options .add-to-collection{
  @extend .option-icon-base; 
  @include backgroundImage(/static/img/icon-add.png, /static/img/icon-add.svg);
}
.options .delete-button{
  @extend .option-icon-base;
  @include backgroundImage(/static/img/icon-delete.png, /static/img/icon-delete.svg);
} 

CSS IS OK BUT...

It doesn't have operators.


CSS
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

CSS IS OK BUT...

Operators, yey!


SCSS
.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

SASS LOOKS OK BUT...

How do I install it?



 There are applications to compile your sass into css in a bliss.

¡Gracias!



Twitter: @espinosacurbelo
Slides: slid.es/rec/css-preprocessors

CSS Preprocessors

By Rodrigo Espinosa

CSS Preprocessors

Advantage of writing CSS with preprocessors (Sass, Less and Stylus) while debugging with source-maps.

  • 1,898
Loading comments...

More from Rodrigo Espinosa