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?
¡Gracias!
Twitter: @espinosacurbelo
Slides: slid.es/rec/css-preprocessors
CSS PREPROCESSORS