Aprende Sass en 15 minutos

Si escribe grandes cantidades de CSS, un preprocesador puede disminuir en gran medida sus niveles de estrés y ahorrarle mucho tiempo valioso. El uso de herramientas como Sass, Less, Stylus o PostCSS hace que las hojas de estilo grandes y complicadas sean más claras de entender y fáciles de mantener. Gracias a características como variables, funciones y mixins, el código se vuelve más organizado, lo que permite a los desarrolladores trabajar más rápido y cometer menos errores.

Hemos trabajado con preprocesadores antes, como recordará de nuestro artículo sobre Less. Esta vez vamos a explicar Sass y mostrarle algunas de sus características principales.

1. Primeros pasos

Los archivos Sass no pueden ser interpretados por el navegador, por lo que deben compilarse en CSS estándar antes de que estén listos para ingresar a la web. Es por eso que necesita algún tipo de herramienta que lo ayude a traducir archivos .scss a .css. Aquí tienes un par de opciones:

  • La solución más simple es una herramienta de navegador para escribir y compilar Sass en el acto:SassMeister.
  • Utilice una aplicación de escritorio de terceros. Tanto las versiones gratuitas como las de pago están disponibles. Puede ir aquí para obtener más información.
  • Si es una persona de CLI como nosotros, puede instalar Sass en su computadora y compilar archivos manualmente.

Si decide ir con la línea de comando, puede instalar Sass en su forma original (escrito en ruby) o puede probar el puerto Node.js (nuestra elección). También hay muchos otros envoltorios, pero como nos encanta Node.js, nos quedaremos con ese.

Así es como puede compilar archivos .scss usando el nodo CLI:

node-sass input.scss output.css

Además, este es el momento de mencionar que Sass ofrece dos sintaxis distintas:Sass y SCSS. Ambos hacen las mismas cosas, solo que están escritos de diferentes maneras. SCSS es el más nuevo y generalmente se considera mejor, así que vamos a optar por eso. Si desea obtener más información sobre la diferencia entre los dos, consulte este excelente artículo.

2. Variables

Las variables en Sass funcionan de manera similar a las de cualquier lenguaje de programación, incluidos principios como tipos de datos y alcance. Cuando definimos una variable, almacenamos dentro de ella un cierto valor, que generalmente es algo que a menudo volverá a ocurrir en el CSS, como un color de paleta, una pila de fuentes o todas las especificaciones para una sombra de cuadro genial.

A continuación puedes ver un ejemplo sencillo. Cambia entre las pestañas para ver el código SCSS y su traducción CSS.

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}
h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

La idea detrás de todo esto es que luego podemos reutilizar los mismos valores más rápidamente, o si se necesita un cambio, podemos proporcionar el nuevo valor en un solo lugar (la definición de la variable), en lugar de aplicarlo manualmente en todos los lugares que deseemos. estamos usando esa propiedad.

3. Mezclas

Puede pensar en los mixins como una versión simplificada de las clases de constructores en los lenguajes de programación:puede tomar un grupo completo de declaraciones CSS y reutilizarlo donde quiera para dar un elemento a un conjunto específico de estilos.

Los mixins pueden incluso aceptar argumentos con la opción de establecer valores predeterminados. En el siguiente ejemplo definimos un cuadrado mezcla y luego utilízalo para crear cuadrados de diferentes tamaños y colores.

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}
.small-blue-square {
  width: 20px;
  height: 20px;
  background-color: blue; 
}

.big-red-square {
  width: 300px;
  height: 300px;
  background-color: red;
}

Otra forma eficiente de usar mixins es cuando una propiedad requiere prefijos para funcionar en todos los navegadores.

@mixin transform-tilt() {
  $tilt: rotate(15deg);

  -webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
      -ms-transform: $tilt; /* IE 9 */
          transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}

.frame:hover { 
  @include transform-tilt; 
}
.frame:hover {
  -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
  -ms-transform: rotate(15deg);  /* IE 9 */
  transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */ 
}

4. Ampliar

La siguiente característica que veremos es el código>@extend, que le permite heredar las propiedades CSS de un selector a otro. Esto funciona de manera similar al sistema mixins, pero se prefiere cuando queremos crear una conexión lógica entre los elementos de una página.

La extensión debe usarse cuando necesitamos elementos de estilo similar, que aún difieren en algunos detalles. Por ejemplo, hagamos dos botones de diálogo:uno para aceptar y otro para cancelar el diálogo.

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}
.dialog-button, .confirm, .cancel {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer; 
}

.confirm {
  background-color: #87bae1;
  float: left; 
}

.cancel {
  background-color: #e4749e;
  float: right; 
}

Si revisa la versión CSS del código, verá que Sass combinó los selectores en lugar de repetir las mismas declaraciones una y otra vez, ahorrándonos una valiosa memoria.

5. Anidamiento

HTML sigue una estructura de anidamiento estricta, mientras que en CSS suele ser un caos total. Con el anidamiento de Sass, puede organizar su hoja de estilo de una manera que se asemeje más al HTML, reduciendo así la posibilidad de conflictos de CSS.

Para un ejemplo rápido, diseñemos una lista que contiene varios enlaces:

ul {
  list-style: none;

  li {
    padding: 15px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }

  }

}
ul {
  list-style: none; 
}

ul li {
  padding: 15px;
  display: inline-block; 
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444; 
}

Muy ordenado y a prueba de conflictos.

6.Operaciones

Con Sass puede realizar operaciones matemáticas básicas directamente en la hoja de estilo y es tan simple como aplicar el símbolo aritmético apropiado.

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}
.container {
  width: 800px; 
}

.column-half {
  width: 400px; 
}

.column-fifth {
  width: 160px; 
}

Aunque Vanilla CSS ahora también ofrece esta característica en forma de calc(), la alternativa de Sass es más rápida de escribir, tiene el módulo % y se puede aplicar a una gama más amplia de tipos de datos (por ejemplo, colores y cadenas).

7. Funciones

Sass ofrece una larga lista de funciones integradas. Sirven para todo tipo de propósitos, incluida la manipulación de cadenas, las operaciones relacionadas con el color y algunos métodos matemáticos útiles como random() y round().

Para exhibir una de las funciones Sass más simples, crearemos un fragmento rápido que utiliza oscurecer ($color, $cantidad) para hacer un efecto flotante.

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}
a {
  padding: 10px 15px;
  background-color: #2196F3; 
}

a:hover {
  background-color: #0c7cd5; 
}

Aparte de la enorme lista de funciones disponibles, también hay opciones para definir las suyas propias. Sass también admite el control de flujo, por lo que, si lo desea, puede crear comportamientos bastante complejos.

Conclusión

Algunas de las características anteriores llegarán a CSS estándar en el futuro, pero aún no están aquí. Mientras tanto, los preprocesadores son una excelente manera de mejorar la experiencia de escritura de CSS y Sass es una opción sólida al elegir uno.

Solo cubrimos la superficie aquí, pero hay mucho más en Sass que esto. Si quieres familiarizarte más con todo lo que tiene para ofrecer, sigue estos enlaces:

  • Documentación de Sass
  • Lista completa de funciones de Sass
  • Tutoriales de Sass Way
  • Cuadro comparativo de preprocesadores CSS