Comenzando con Sass

Variables

Si tiene un valor que usa con frecuencia, puede almacenarlo en una variable. Podría usar esto para definir esquemas de color, por ejemplo. Solo tendría que definir su esquema una vez y luego podría usarlo en todas sus hojas de estilo.

Para definir una variable, debe prefijar su nombre con el símbolo $. (Como lo haría en PHP).

Puede almacenar cualquier valor de propiedad CSS válido dentro de una variable. Como colores, fuentes o URL.

Ejemplo 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

Importación

Supongamos el siguiente escenario: Tiene dos hojas de estilo: _variables.scss y layout.scss. Lógicamente, mantiene todas sus variables dentro de su hoja de estilo variable pero desea acceder a ellas desde su hoja de estilo de diseño.

NOTA: Puede notar que la hoja de estilo de variables tiene un guión bajo (’_’) antes de su nombre. Esto se debe a que es parcial, lo que significa que se importará.

sass-lang.com dice lo siguiente sobre los parciales: Puede crear archivos Sass parciales que contengan pequeños fragmentos de CSS que puede incluir en otros archivos Sass. Esta es una excelente manera de modularizar su CSS y ayudar a que las cosas sean más fáciles de mantener. […] El guión bajo le permite a Sass saber que el archivo es solo un archivo parcial y que no debe generarse en un archivo CSS. Los parciales de Sass se utilizan con la directiva @import.

Las variables SCSS son excelentes para este escenario. Supongamos que su _variables.scss se ve así:

$primary-color: #333;

Puede importarlo con @import y luego el nombre de la hoja de estilo entre comillas. Su hoja de estilo de diseño ahora puede verse así (tenga en cuenta que no hay un guión bajo o una extensión de archivo en la importación):

@import 'variables';
body {
  color: $primary-color;
}

Esto daría como resultado algo como lo siguiente:

body {
  color: #333;
}

Comentarios

SASS admite dos tipos de comentarios:

  • Comentarios en línea: solo abarcan una línea y generalmente se usan para describir una variable o un bloque. La sintaxis es la siguiente: // Your comment here (usted lo antepone con una barra inclinada doble (//) y el analizador ignora el resto de la línea.

  • Comentarios de varias líneas: abarcan varias líneas y generalmente se usan para mostrar un copyright o una licencia en la parte superior de un documento. Puede abrir un bloque de comentarios de varias líneas con /* y puede cerrar un bloque de comentarios de varias líneas con */. Aquí hay un ejemplo:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/

Anidamiento

diseño.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

producción

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

Configuración

Cuando se trata de usar SASS, hay varias formas de configurar su espacio de trabajo. Algunas personas prefieren usar herramientas de línea de comandos (probablemente gente de Linux) y otras prefieren usar aplicaciones GUI. Cubriré ambos.

Herramientas de línea de comandos

La página ‘Instalar SASS’ en sass-lang.com cubre esto bastante bien. Puede usar SASS con Ruby (que se puede instalar desde un administrador de paquetes de Linux o puede descargar el instalador en Windows). macOS viene con Ruby preinstalado.

Una vez que haya instalado Ruby, debe instalar SASS (en algunos casos, es posible que no necesite sudo):

sudo gem install sass

Finalmente, puede comprobar que ha instalado SASS con sass -v.

Aplicaciones GUI

Si bien hay una serie de aplicaciones GUI que puede usar, le recomiendo Scout-App. Crea y comprime automáticamente sus archivos CSS, guarda el archivo y es compatible con macOS, Windows y Linux.