SASS es un preprocesador CSS libre y gratuito que permite utilizar características avanzadas no disponibles en CSS como variables, anidamiento de reglas, importación de archivos parciales, mixins y herencia. El código SASS debe transpilarse a CSS estándar mediante un preprocesador antes de poder utilizarse en una página web.

1. SASS
Preprocesador CSS

2. Ejemplo de SASS
/* Definir variables */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Usar variables */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}

3. Características
Syntactically Awesome Stylesheet
Preprocesador CSS libre y gratuito
Compatible con todas las versiones de CSS
Diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum en 2006.
Reduce la repetición de código: ahorra tiempo.

4. 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.

5. Elementos SASS

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

7. Ámbito de variables
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
h1 {
color: green;
}
p {
color: red;
}
Ámbito: una variable definida dentro de una regla
solo se aplica en esa regla.

8. Variables globales (!global)
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
h1 {
color: green;
}
p {
color: green;
}
Ámbito: una variable definida como globals se
aplica a un ámbito global.

9. Anidamiento de reglas
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

10. Anidamiento de propiedades
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;

11. Importar ficheros parciales (comienzo con _)
//_colors.scss
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
//main.scss
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: #4169E1;
}

12. Mixins
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
.danger {
@include important-text;
background-color: green;
}
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}

13. Mixins con variables y valores por defecto
//Mixin con dos argumentos
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); }
.myNotes {
@include bordered(red, 2px); }
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
.myTips {
@include bordered($color: orange);
}

14. Herencia (@extend)
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}