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

Hace un tiempo, Thoriq Firdaus escribió un excelente artículo sobre cómo comenzar a utilizar Sass, que le mostró cómo instalar y utilizar este lenguaje de preprocesador CSS de gran utilidad (es posible que desee comprobarlo, para comenzar)..

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

• Herramientas del comercio
• Variables
• Anidamiento
• Extendiendo Rulesets
• Mixins
• Selectores de marcador de posición
• Operaciones
• Funciones

Herramientas del comercio

Thoriq te mostró cómo puedes usar Sass desde la línea de comandos usando la sass - reloj mando.

Si prefieres las herramientas GUI, puedes utilizar mi aplicación favorita personal, Codekit, una herramienta de desarrollo web para compilar Sass, concatenar, realizar revisiones automáticas y mucho más. Prepros es otra aplicación muy capaz que se puede utilizar en todos los sistemas. Ambos son aplicaciones pagadas pero valen la pena si los usarás a largo plazo.

Si solo quieres probar Sass sin pagar nada puede usar el terminal, o Koala (aquí está nuestra revisión), una aplicación gratuita rica en funciones y multiplataforma, que puede mantenerse firme contra sus contrapartes premium.

Variables

Una de las primeras cosas que necesitarás para envolver a tu cabeza son las variables. Si proviene de un PHP u otro lenguaje de codificación similar, esto será una segunda naturaleza para usted. Las variables son para Almacenamiento de bits y piezas de información reutilizable., como un valor de color por ejemplo:

 $ primary_color: # 666666; .button color: $ primary_color;  .importante color: $ primary_color;  

Esto puede no parecer tan útil aquí, pero imagina tener 3,000 líneas de código. Si su esquema de color cambia, deberá reemplazar cada valor de color en CSS. Con Sass puedes simplemente modificar el valor del $ primary_color Variable y se hará con ella..

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 recolorear todo su proyecto y cambiar las fuentes y otros aspectos clave sin tocar las reglas reales de CSS. Todo lo que necesitas hacer es modificar algunas variables..

Anidamiento

Otra característica básica que Sass te da es la capacidad de anidar reglas. Supongamos que estás 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 / * Reglas para el área de navegación * / #header nav ul / * Reglas para el menú * / #header nav li / * Reglas para elementos de lista * / #header nav a / * Reglas para enlaces * / 

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

Así es como podría verse el código anterior en Sass:

 #header nav / * Reglas para el área de navegación * / ul / * Reglas para el menú * / li / * Reglas para los elementos de la lista * / a / * Reglas para los enlaces * / 

La anidación es extremadamente útil porque hace que las hojas de estilo (mucho) sean más legibles. Al utilizar el anidamiento junto con una sangría adecuada, puede lograr Estructuras de código altamente legibles, incluso si tienes una buena cantidad de código.

Un inconveniente de la anidación es que puede conducir a 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 lo 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 / * Reglas para el área de navegación * / ul / * Reglas para el menú * / li / * Reglas para los elementos de lista * / a / * Reglas para enlaces * / 

Extendiendo Rulesets

La extensión será familiar si ha trabajado con lenguajes orientados a objetos. Se entiende mejor a través de un ejemplo, vamos a crear 3 botones que son pequeñas variaciones entre sí..

 .botón display: inline-block; color: # 000; fondo: # 333; radio del borde: 4px; relleno: 8px 11px;  .button-primary @extend .button; fondo: # 0091C2 .button-small @extend .button; tamaño de letra: 0.9em; relleno: 3px 8px;  

los .botón-primario y .botón pequeño todas las clases extienden la .botón clase lo que significa que toman todas sus propiedades y luego definen su propia.

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 utilizar la funcionalidad de extensión para una gran eficiencia de CSS..

Una advertencia de que se extiende es que no trabajarán en consultas de medios como es de esperar Esto es un poco más avanzado, pero puede leer todo acerca de este comportamiento en Comprender los selectores de marcadores de posición: los selectores de marcadores de posición son una extensión especial de la que hablaremos pronto.

Mixins

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

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

 @mixing hover-effect -webkit-transition: color de fondo 200ms; -moz-transición: fondo-color 200ms; -o-transición: fondo-color 200ms; transición: fondo-color 200ms;  a @include hover-effect;  .button @include hover-effect;  

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

 @mixin hover-effect ($ speed) -webkit-transition: background-color $ speed; -moz-transición: fondo-color $ velocidad; -o-transición: fondo-color $ velocidad; transición: fondo-color $ velocidad;  a @include hover-effect (200ms);  .button @include hover-effect (300ms);  

Selectores de marcador de posición

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

 .mensaje font-size: 1.1em; relleno: 11px; ancho del borde: 1px; estilo de borde: sólido;  .message-danger @extend .message; fondo: # C20030; color: #fff; color de borde: # A8002A;  .message-success @extend .message; fondo: # 7EA800; color: #fff; color de borde: # 6B8F00;  

Es muy probable que la clase de mensaje nunca se use en nuestro HTML: ha sido Creado para ser extendido, no utilizado como es. Esto causa un poco de hinchazón en tu CSS generado. Para hacer 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; relleno: 11px; ancho del borde: 1px; estilo de borde: sólido;  .message-danger @extend% button; fondo: # C20030; color: #fff; color de borde: # A8002A;  .message-success @extend% button; fondo: # 7EA800; color: #fff; color de borde: # 6D9700;  

En esta etapa, es posible que se pregunte cuál es la diferencia entre la extensión y la mezcla. Si utiliza marcadores de posición, se comportan como una mezcla sin parámetros. Esto es cierto, pero la salida en CSS difiere. La diferencia es que mixins duplicar reglas mientras los marcadores de posición se asegurarán de que las mismas reglas compartan los selectores, dando como resultado menos CSS al final.

Operaciones

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

 .contenedor ancho: 100%;  articulo flotar: izquierda; ancho: 600px / 960px * 100%;  a un lado flotar: derecho; ancho: 300px / 960px * 100%;  

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

 .contenedor ancho: 100%;  articulo flotar: izquierda; ancho: 62.5%;  a un lado flotar: derecho; ancho: 31,25%;  

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

 $ primario: # 7EA800; .message-success @extend% button; fondo: $ primario; color: #fff; color de borde: $ primario - # 111;  

Cuanto más claro sea el color restado, más oscuro será el tono resultante. Cuanto más claro es el color agregado, más claro es 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. Echa un vistazo a la larga lista en la documentación del desarrollador. Echaré un vistazo a una pareja aquí solo para mostrarte cómo funcionan.

los aligerar y oscurecer 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 utilizando la función de oscurecimiento..

 $ primario: # 7EA800; .message-success @extend% button; fondo: $ primario; color: #fff; color de borde: oscurecer ($ primario, 5);  

El segundo argumento de la función es el porcentaje de oscurecimiento requerido. Todas las funciones tienen parámetros; ¡Echa un vistazo a la documentación para ver cuáles son! Aquí hay algunas otras funciones de color autoexplicativas: desaturar, saturar, invertir, escala de grises.

los hacer techo 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 quieres usar muchos decimales en el CSS final.

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

Visión general

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

Si está interesado en otro preprocesador de CSS similar, sugiero echar un vistazo a MENOS (o consulte nuestra guía para principiantes): el principal subyacente es muy similar.!