SASS

Preprocesador CSS
Ejemplo de SASS
/* Definir variables */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Usar variables */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
Características

Syntactically Awesome Stylesheet

Preprocesador CSS libre y gratuito

Compatible con todas las versiones de CSS

Reduce la repetición de código: ahorra tiempo.

Diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum en 2006.

Funcionamiento

Es necesario un preprocesador (transpilador) para convertir código Sass en CSS estándar.

1. Descargar aplicación para crear código SASS (https://sass-lang.com/install)

2. Crear el código .scss.
3. Transpilar el código para obtener el .css resultante.

Transpilar: tomar un código escrito en un lenguaje y traducirlo a otro.

Elementos SASS
Variables
$myFont: Helvetica, sans-serif; body {
$myColor: red; font-family: Helvetica, sans-serif;
$myFontSize: 18px; font-size: 18px;
$myWidth: 680px; color: red;
}
body {
font-family: $myFont; #container {
font-size: $myFontSize; width: 680px;
color: $myColor; }
}

#container {
width: $myWidth;
}
Ámbito de variables
$myColor: red; h1 {
color: green;
h1 { }
$myColor: green;
color: $myColor; p{
} color: red;
}
p{
color: $myColor;
}

Ámbito: una variable definida dentro de una regla

solo se aplica en esa regla.
Variables globales (!global)
$myColor: red; h1 {
color: green;
h1 { }
$myColor: green !global;
color: $myColor; p{
} color: green;
}
p{
color: $myColor;
}

Ámbito: una variable definida como globals se

aplica a un ámbito global.
Anidamiento de reglas
nav { nav ul {
ul { margin: 0;
margin: 0; padding: 0;
padding: 0; list-style: none;
list-style: none; }
} nav li {
li { display: inline-block;
display: inline-block; }
} nav a {
a{ display: block;
display: block; padding: 6px 12px;
padding: 6px 12px; text-decoration: none;
text-decoration: none; }
}
}
Anidamiento de propiedades
font: { font-family: Helvetica, sans-serif;
family: Helvetica, sans-serif; font-size: 18px;
size: 18px; font-weight: bold;
weight: bold;
} text-align: center;
text-transform: lowercase;
text: { text-overflow: hidden;
align: center;
transform: lowercase;
overflow: hidden;
}
Importar ficheros parciales (comienzo con _)
//_colors.scss body {
$myPink: #EE82EE; font-family: Helvetica, sans-serif;
$myBlue: #4169E1; font-size: 18px;
$myGreen: #8FBC8F; color: #4169E1;
}

//main.scss
@import "colors";

body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
Mixins
@mixin important-text { .danger {
color: red; color: red;
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
border: 1px solid blue; border: 1px solid blue;
} background-color: green;
}
.danger {
@include important-text;
background-color: green;
}
Mixins con variables y valores por defecto
//Mixin con dos argumentos .myArticle {
@mixin bordered($color, $width) { border: 1px solid blue;
border: $width solid $color; }
}
.myNotes {
.myArticle { border: 2px solid red;
@include bordered(blue, 1px); } }

.myNotes {
@include bordered(red, 2px); }

@mixin bordered($color: blue, $width: 1px) { .myTips {

border: $width solid $color; @include bordered($color: orange);
} }
Herencia (@extend)
.button-basic { .button-basic, .button-report, .button-submit {
border: none; border: none;
padding: 15px 30px; padding: 15px 30px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
} }

.button-report { .button-report {
@extend .button-basic; background-color: red;
background-color: red; }
}
.button-submit {
.button-submit { background-color: green;
@extend .button-basic; color: white;
background-color: green; }
color: white;
}