Una guía simple y fácil para entender Sass

Hace un tiempo, Thoriq Firdaus escribió un excelente artículo sobre cómo comenzar con Sass que le mostró cómo instalar y usar este lenguaje de preprocesador CSS altamente útil (es posible que desee verificarlo, ya sabe, para comenzar).

En este artículo, pensé en brindarle un poco más de información sobre lo que puede hacer con Sass y cómo los desarrolladores lo usan todos los días para crear un código CSS mejor y más modular. Salta a la sección que quieras:

• Herramientas del oficio
• Variables
• Anidamiento
• Ampliación de conjuntos de reglas
• mezclas
• Selectores de marcador de posición
• Operaciones
• Funciones
• depuración

Herramientas del oficio

Thoriq le mostró cómo puede usar Sass desde la línea de comando usando el sass --watch dominio.

Si prefiere las herramientas GUI, puede optar por mi aplicación favorita personal, Codekit, una herramienta de desarrollo web para compilar Sass, concatenar, prefijar automáticamente y mucho más. Prepros es otra aplicación muy capaz que se puede utilizar en todos los sistemas. Ambos son aplicaciones pagas pero bien valen la pena si los va a usar a largo plazo.

Si solo quieres probar Sass sin pagar nada puede usar la terminal, o la aplicación Scout, una aplicación rica en funciones multiplataforma gratuita, que puede mantenerse firme frente a sus contrapartes premium.

Variables

Una de las primeras cosas que necesitará entender son las variables. Si proviene de PHP u otro lenguaje de codificación similar, esto será algo natural para usted. Las variables son para almacenar bits y piezas de información reutilizablecomo un valor de color, por ejemplo:

$primary_color: #666666;

.button {
  color: $primary_color;
}

.important {
  color: $primary_color;
}

Esto puede no parecer tan útil aquí, pero imagina tener 3000 líneas de código. Si su combinación de colores cambia, deberá reemplazar cada valor de color en CSS. Con Sass puedes simplemente modificar el valor del $primary_color variable y listo.

Las variables se utilizan para almacenar nombres de fuentes, tamaños, colores y una gran cantidad de otra información. Para proyectos más grandes, puede que valga la pena extraer todas sus variables en un archivo separado (veremos cómo se hace esto pronto).

Lo que esto le permite hacer es volver a colorear todo su proyecto y cambiar las fuentes y otros aspectos clave sin tocar nunca las reglas CSS reales. Todo lo que necesita hacer es modificar algunas variables.

Anidamiento

Otra característica básica que te ofrece Sass es la capacidad de anidar reglas. Supongamos que está creando un menú de navegación. Usted tiene un nav elemento que contiene una lista desordenada, elementos de lista y enlaces. En CSS puedes hacer algo como esto:

#header nav {
  /* Rules for the nav area */
}

#header nav ul {
  /* Rules for the menu */
}

#header nav li {
  /* Rules for list items */
}

#header nav a {
  /* Rules for links */
}

En los selectores nos estamos repitiendo mucho. Si los elementos tienen raíces comunes, podemos usar el anidamiento para escribir nuestras reglas de una manera mucho más limpia.

Así es como se vería el código anterior en Sass:

#header {
  nav {
    /* Rules for the nav area */
  }

  ul {
    /* Rules for the menu */
  }

  li {
    /* Rules for list items */
  }

  a {
    /* Rules for links */
  }
}

El anidamiento es extremadamente útil porque hace que las hojas de estilo (mucho) sean más legibles. Al usar el anidamiento junto con la sangría adecuada, puede lograr estructuras de código altamente legiblesincluso si tiene una buena cantidad de código.

Una desventaja de anidar es que puede conducir a una especificidad innecesaria. En el ejemplo anterior me he referido a enlaces con #header nav a. También podrías usar #header nav ul li a que probablemente sería demasiado.

En Sass, es mucho más fácil ser muy específico ya que todo lo que necesita hacer es anidar sus reglas. Lo siguiente es mucho menos legible y bastante específico.

#header {
  nav {
    /* Rules for the nav area */
    ul {
      /* Rules for the menu */
      li {
        /* Rules for list items */
        a {
          /* Rules for links */
        }
      }
    }
  }
}

Ampliación de conjuntos de reglas

La extensión le resultará familiar si ha trabajado con lenguajes orientados a objetos. Se entiende mejor a través de un ejemplo, creemos 3 botones que son ligeras variaciones entre sí.

.button {
  display: inline-block;
  color: #000;
  background: #333;
  border-radius:4px;
  padding:8px 11px;
}

.button-primary {
  @extend .button;
  background: #0091C2
}

.button-small {
  @extend .button;
  font-size:0.9em;
  padding:3px 8px;
}

El .button-primary y .button-small Todas las clases extienden el .button clase, lo que significa que toman todas sus propiedades y luego definen las suyas propias.

Esto es inmensamente útil en muchas situaciones donde se pueden usar variaciones de un elemento. Los mensajes (alerta/éxito/error), los botones (colores, tamaños), los tipos de menú, etc., podrían usar la funcionalidad de extensión para una gran eficiencia de CSS.

Una advertencia de las extensiones es que no funcionarán en consultas de medios como era de esperar. Esto es un poco más avanzado, pero puede leer todo sobre este comportamiento en Comprensión de los selectores de marcador de posición: los selectores de marcador de posición son un tipo especial de extensión del que hablaremos pronto.

mezclas

Los mixins son otra característica favorita de los usuarios de preprocesadores. Los mixins son conjuntos de reglas reutilizables, perfectos para reglas específicas de proveedores o para abreviar reglas CSS largas.

¿Qué tal crear una regla de transición para los elementos flotantes?

@mixing hover-effect {
  -webkit-transition: background-color 200ms;
  -moz-transition: background-color 200ms;
  -o-transition: background-color 200ms;
  transition: background-color 200ms;
}

a {
  @include hover-effect;
}

.button {
  @include hover-effect;
}

Los mixins también te permiten usar variables para definir los valores dentro del mixin. Podríamos reescribir el ejemplo anterior para darnos control sobre el tiempo exacto de la transición. Es posible que queramos que los botones hagan la transición un poco más lento, por ejemplo.

@mixin hover-effect( $speed ) {
  -webkit-transition: background-color $speed;
  -moz-transition: background-color $speed;
  -o-transition: background-color $speed;
  transition: background-color $speed;
}

a {
  @include hover-effect(200ms);
}

.button {
  @include hover-effect(300ms);
}

Selectores de marcador de posición

Los selectores de marcador de posición se introdujeron con Sass 3.2 y resolvieron un problema que podría causar un poco de hinchazón en el código CSS generado. Eche un vistazo a este código que crea mensajes de error:

.message {
  font-size:1.1em;
  padding:11px;
  border-width:1px;
  border-style:solid;
}

.message-danger {
  @extend .message;
  background: #C20030;
  color:#fff;
  border-color: #A8002A;
}

.message-success {
  @extend .message;
  background: #7EA800;
  color:#fff;
  border-color: #6B8F00;
}

Lo más probable es que la clase de mensaje nunca se use en nuestro HTML: ha sido creado para ser ampliado, no utilizado como es. Esto provoca un poco de hinchazón en el CSS generado. Para que su código sea más eficiente, puede usar el selector de marcador de posición que se indica con un signo de porcentaje:

%message {
  font-size:1.1em;
  padding:11px;
  border-width:1px;
  border-style:solid;
}

.message-danger {
  @extend %button;
  background: #C20030;
  color:#fff;
  border-color: #A8002A;
}

.message-success {
  @extend %button;
  background: #7EA800;
  color:#fff;
  border-color: #6D9700;
}

En esta etapa, es posible que se pregunte cuál es la diferencia entre extensiones y mezclas. Si usa marcadores de posición, se comportan como una mezcla sin parámetros. Esto es cierto, pero la salida en CSS es diferente. la diferencia es que reglas duplicadas de mixins mientras los marcadores de posición se asegurarán de que las mismas reglas compartan selectoreslo que resulta en menos CSS al final.

Operaciones

Es difícil resistirse al juego de palabras aquí, pero me abstendré de hacer bromas médicas por ahora. Los operadores te permiten hacer algunos cálculos en tu código CSS y pueden ser bastante útiles. El ejemplo en la guía de Sass es perfecto para mostrar esto:

.container { width: 100%; }

article {
 float: left;
 width: 600px / 960px * 100%;
}

aside {
 float: right;
 width: 300px / 960px * 100%;
}

El ejemplo anterior crea un sistema de cuadrícula basado en 960 px con la mínima molestia. Se compilará muy bien en el siguiente CSS:

.container {
 width: 100%;
}

article {
 float: left;
 width: 62.5%;
}

aside {
 float: right;
 width: 31.25%;
}

Un gran uso que encuentro para las operaciones es mezclar colores. Si observa el mensaje de éxito Sass anterior, no está claro que el color del fondo y el borde tengan algún tipo de relación. Al restar un tono de gris podemos oscurecer el color, haciendo visible la relación:

$primary: #7EA800;

.message-success {
  @extend %button;
  background: $primary;
  color:#fff;
  border-color: $primary - #111;
}

Cuanto más claro sea el color sustraído, más oscuro será el tono resultante. Cuanto más claro sea el color añadido, más claro será el tono resultante.

Funciones

Hay una gran cantidad de funciones para usar: funciones numéricas, funciones de cadena, funciones de lista, funciones de color y más. Eche un vistazo a la larga lista en la documentación del desarrollador. Echaré un vistazo a un par aquí solo para mostrarte cómo funcionan.

El lighten y darken La función se puede utilizar para cambiar la luminosidad de un color. Esto es mejor que restar sombras, hace que todo sea aún más modular y obvio. Eche un vistazo a nuestro ejemplo anterior usando la función de oscurecimiento.

$primary: #7EA800;

.message-success {
  @extend %button;
  background: $primary;
  color:#fff;
  border-color: darken( $primary, 5 );
}

El segundo argumento de la función es el porcentaje de oscurecimiento requerido. Todas las funciones tienen parámetros; ¡Eche un vistazo a la documentación para ver cuáles son! Aquí hay algunas otras funciones de color que se explican por sí mismas: desaturate, saturate, invert, grayscale.

El ceil La función, al igual que en PHP, devuelve un número redondeado al siguiente número entero. Esto se puede usar al calcular el ancho de las columnas o si no desea usar muchos lugares decimales en el CSS final.

.title {
  font-size: ceil( $heading_size * 1.3314 );
}

depuración

La depuración es un flujo común para solucionar problemas. En un lenguaje de programación como PHP y JavaScript, utiliza una función especial integrada como var_dump (PHP) o console.log (JavaScript). Sass, en este caso, proporciona unas directivas especiales, @debug, @warny @errorpara realizar fácilmente la depuración en Sass.

A continuación se muestra un ejemplo para volcar un valor de variable usando el @debug.

$size: 600px;

div {
  $width = $size / 960px * 100%;
  @debug "The width is: #{$width}";
  width: $width;
}

Al compilar el código fuente de Sass en CSS, la directiva imprimirá el contenido en la consola o terminal.

style.scss:5 DEBUG: The width is: 0.625px

Nosotros podemos usar @warn para enviar un aviso, por ejemplo, si algunos valores no son validado

$primary-color: #333;
$secondary-color: #f3f3f3;

div {

    $color-bg = darken( $primary-color, 100% );
    $color-text = darken( $secondary-color, 100% );

    background: $color-bg;
    color: $color-text;

    @if $color-bg == $color-text {
        @warn "Background and text color are both #{$colour}!";
    }
}

De manera similar, esto volcará el contenido en la consola o Terminal mientras se compila en CSS. En el ejemplo anterior, mostramos una advertencia cuando tanto el fondo como el color del texto son iguales.

Warning: Background and text color are both #000000!
  style.scss 6:8 root stylesheet

El @error funciona de manera similar a @warn que se usa arroja un contenido si algo no se valida, excepto que obligará al compilador Sass a dejar de compilar el código fuente.

  Error: "Background and text color are both #000000!"
  ╷
6 │     @error "Background and text color are both #{$colour}!";
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  style.scss 6:8  root stylesheet

Descripción general

Las características de Sass nos brindan un gran poder para escribir mejor CSS con menos esfuerzo. El uso adecuado de mixins, extensiones, funciones y variables hará que nuestras hojas de estilo sean más mantenibles, más legibles y más fáciles de escribir.

Si está interesado en otro preprocesador CSS similar, le sugiero que eche un vistazo a LESS (o consulte nuestra guía para principiantes): ¡el principio subyacente es muy similar!