Syntactically Awesome StyleSheets

¿Por qué he de utilizar SASS?

SASS nos permite añadir funcionalidades que no existen en CSS y que amplian enormemente sus posibilidades.

Algunas de las mejoras de SASS son:

• Variables
• Anidación de clases y selectores
• Imports
• Extensiones de clases
• Funciones - (Mixins)
• Operaciones aritméticas

(Primera parte)

Variables

Declarando Variables

Una variable es un registro donde guardamos un dato que necesitaremos aplicar en diferentes partes de nuestro código.

Para poder utilizar una variable primero hemos de crearla y asignarle un valor. A este proceso se le denomina declaración de variables

$primaryColor: red;
$secondaryColor: blue;
        

Utilizando Variables

Una vez declarada, podemos reutilizar las variables en tantos lugares de nuestro código como necesitemos.

h1 {
    color: $primaryColor;
}

h2 {
    color: $secondaryColor;
}
        

scss

$primaryColor: red;

h1 {
    color: $primaryColor;
}
        

css

h1 {
    color: red;
}
        

Anidación (nesting)

SASS permite anidar uno o varios selectores CSS dentro de otro.

Esto nos permitirá tener nuestro código más organizado y realizar cambios con mayor facilidad.

Podemos utilizar & para hacer referencia al elemento padre y de esa manera lograr selectores más complejos.

scss

.slider-container {
    float: left;

    img {
        border: none;
        display: block;
    }
}
        

css

.slider-container {
    float: left;
}
.slider-container img {
    border: none;
    display: block;
}
        

scss

.logo {
    color: red;

    header & {
        color: orange;
    }
}
        

css

.logo { color: red; }

header .logo { color: orange; }
        

scss

.tab {
    color: red;

    &.selected {
        color: orange;
    }
}
        

css

.tab { color: red; }

.tab.selected { color: orange; }
        

scss

a {
    color: red;

    &:hover {
        color: orange;
    }
}
        

css

a { color: red; }

a:hover { color: orange; }
        

BEM Nesting

Una práctica habitual si trabajamos con un sistema de nomenclatura de componentes (como BEM), es hacer uso de la anidación de Sass para organizar los mismos.

scss

.block {
    color: red;

    &__element {
        color: orange;

        &--modifier {
            color: lime;
        }
    }
}
        

css

.block { color: red; }
.block__element { color: orange; }
.block__element--modifier { color: lime; }
        

Importar archivos

Para agilizar el proceso de edición y depuración de errores evitaremos trabajar con un único archivo CSS. En lugar de eso crearemos diferentes archivos SASS que separarán en módulos nuestro código.

Finalmente, todos los archivos SASS los combinaremos en un sólo CSS para evitar realizar múltiples llamadas HTTP que ralentizen la carga de nuestro site.

Para crear esa estructura modularizada utilizaremos @import en nuestro archivo style.scss.

El resultado será un style.css con todo el código importado.

// Contenido de style.scss

@import "base/header";
@import "base/layout";
@import "base/footer";
@import "tipography/headings";
@import "components/buttons";
@import "components/boxes";
        

Nombres de archivos

Para indicar en SASS que un archivo .scss concreto no debe generar un .css correspondiente, le añadimos un "_" delante del nombre.

De esta forma el contenido de este fichero solo se procesará cuando sea importado por otro.

La estructura de archivos quedaría así:

La importancia de modularizar con @import

Un proyecto web se compone de múltiples elementos. Creando un archivo SASS para cada uno facilitamos el mantenimiento y el debug de errores.

Una propuesta de estructura sería:

• styles.scss=> Relizamos todos los imports
• settings.scss=> Declaramos las variables de entorno
• /helpers=> Carpeta donde incluimos: normalize, clearfix, etc...
• /grid=> Carpeta donde incluimos el framework o grid
• /layout=> Carpeta de archivos que dan estructura al site
• /components=> Carpeta de elementos reutilizables
• /theme=> Carpeta en la que definimos la presentación