sass Tutorial
Empezando con sass

Observaciones

Versiones

Preparar

Cuando se trata de usar SASS, hay varias formas de configurar su área de trabajo. Algunas personas prefieren usar herramientas de línea de comandos (probablemente personas de Linux) y otras prefieren usar aplicaciones GUI. Voy a 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 hayas instalado Ruby, debes instalar SASS (en algunos casos, puede que no sea necesario sudo ):

sudo gem install sass

Finalmente, puedes verificar que has instalado SASS con sass -v .

Aplicaciones GUI

Si bien hay varias aplicaciones GUI que puedes usar, te recomiendo la aplicación Scout . Construye y comprime automáticamente sus archivos CSS, guardando archivos y es compatible con macOS, Windows y Linux.

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 a lo largo de sus hojas de estilo.

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

Puede almacenar cualquier valor de propiedad CSS válido dentro de una variable. Tales como colores, fuentes o URLs.

Ejemplo 1:

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

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

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

Importador

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

NOTA: Es posible que observe que las variables hoja de estilo tienen un guión bajo ('_') antes de su nombre. Esto se debe a que es parcial, lo que significa que se va a importar.

sass-lang.com dice lo siguiente acerca de los parciales: Puedes crear archivos parciales de Sass que contienen pequeños fragmentos de CSS que puedes incluir en otros archivos de Sass. Esta es una excelente manera de modularizar su CSS y ayudar a mantener las cosas más fáciles de mantener. [...] El subrayado le permite a Sass saber que el archivo es solo un archivo parcial y que no se debe generar en un archivo CSS. Los parciales de Sass se utilizan con la directiva @import.

Las variables SCSS son geniales para este escenario. Supongamos que su _variables.scss 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í (tome nota de 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;
}

Anidamiento

layout.scss

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

salida

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

Comentarios

SASS soporta dos tipos de comentarios:

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

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

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