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

Hace un tiempo Thoriq Firdaus escribió un gran artículo sobre cómo empezar con Sass que mostraste cómo instalar y utilizar este gran utilidad idioma preprocesador CSS (es posible que desee comprobar que funciona, ya sabes, para empezar).

En este artículo pensé que te 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 una mejor y más código CSS modular. Pase a la sección que desee:

Herramientas del oficio
Variables
Jerarquización
Extendiendo conjuntos de reglas
Mixins
Placeholder Selectores
Operaciones
Funciones

Lectura recomendada: Usando Bootstrap 3 Con Sass
Herramientas del Comercio
Thoriq le mostró cómo se puede utilizar Sass desde la línea de comandos con el comando –watch descaro.
Si prefiere herramientas visuales, se puede ir con mi aplicación favorita, Codekit, una herramienta de desarrollo web para compilar Sass, concatenar, autoprefixing y mucho más. Prepros es otra aplicación muy capaz que puede ser utilizado en todos los sistemas. Ambos se pagan aplicaciones, pero están bien vale la pena si usted va a utilizar en el largo plazo.
Si lo que desea es probar Sass sin pagar por cualquier cosa que usted puede utilizar el terminal, o Koala (aquí está nuestra opinión), una aplicación rica en características multiplataforma libre, que puede mantenerse firme frente a sus contrapartes de primera calidad.
Variables
Una de las primeras cosas que usted necesita para envolver su cabeza alrededor es variables. Si usted viene de un PHP u otro fondo lenguaje de codificación similar este será segunda naturaleza para usted. Las variables son para almacenar fragmentos 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 imagino que tiene 3.000 líneas de código. Si el esquema de color cambia lo que se necesita para reemplazar cada valor de color en el CSS. Con Sass que sólo puede modificar el valor de la variable $ primary_color y hacer con ella.
Las variables se utilizan para almacenar nombres de fuente, tamaños, colores y un sinfín de otras informaciones. Para proyectos más grandes, puede que vale la pena extraer todas las variables en un archivo separado (vamos a echar un vistazo a cómo se hace esto en breve). Lo que esto le permite hacer es recolor todo su proyecto y cambiar fuentes y otros aspectos clave sin tener que tocar las reglas CSS reales. Todo lo que necesitas hacer es modificar algunas variables.
Jerarquización
Otra característica básica Sass le da es la capacidad de reglas nido. Vamos a suponer que usted está construyendo un menú de navegación. Usted tiene un elemento de navegación que contiene una lista desordenada, elementos de la lista y enlaces. En CSS usted puede hacer algo como esto:
#header nav {/ * Reglas para la zona de navegación * /} #header nav ul {/ * Reglas para el menú * /} #header li nav {/ * Reglas para elementos de la lista * /} #header nav de {/ * Reglas para los enlaces * /}
En los selectores, nos repetimos mucho. Si los elementos tienen raíces comunes, podemos utilizar anidación para escribir nuestras reglas de una manera mucho más limpia.
Así es como el código anterior podría mirar en Sass:
1617 # header {nav {/ * Reglas para la zona de navegación * /} ul {/ * Reglas para el menú * /} li {/ * Reglas para elementos de la lista * /} a {/ * Reglas para enlaces * /}}
Anidamiento es muy útil porque hace las hojas de estilo (mucho) más legibles. Mediante el uso de anidación, junto con sangría adecuada se puede lograr estructuras de código altamente legibles, incluso si usted tiene una buena cantidad de código.
Un inconveniente de anidación es que puede conducir a la especificidad innecesaria. En el ejemplo anterior he refered a los vínculos con #header nav a. También puede utilizar #header nav ul li a que probablemente sería demasiado.
En Sass, es mucho más fácil que ser muy específico ya que todo lo que necesita hacer es nido de sus reglas. El siguiente es mucho menos fácil de leer y muy específicas.
11121314 # header {nav {/ * Reglas para la zona de navegación * / ul {/ * Reglas para el menú * / li {/ * Reglas para elementos de la lista * / a {/ * Reglas para enlaces * /}}}}}
Extendiendo conjuntos de reglas
La extensión será familiar si ha de trabajar con lenguajes orientados a objetos. Se entiende mejor con un ejemplo, vamos a crear 3 botones que son ligeras variaciones de unos a otros.
161718.button {display: inline-block; color: # 000; background: # 333; border-radius: 4px; padding: 11px 8px;} .button-primaria {.buttonextend; background: # 0091C2}-.button pequeña {extend .button; font-size: 0.9em; padding: 3px 8px;}
Las clases .button-primaria y .button pequeña todos se extienden la clase .button que significa que asumen todas sus propiedades y luego definir su propia.
Esto es extremadamente útil en muchas situaciones donde se pueden usar variaciones de un elemento. Mensajes (alerta / éxito / error), botones (colores, tamaños), tipos de menú y así sucesivamente todos podrían utilizar la funcionalidad que se extiende por una gran eficiencia CSS.
Una advertencia de extiende es que no van a trabajar en las consultas de los medios de comunicación como es de esperar. Esto es un poco más avanzado, pero se puede leer todo acerca de este comportamiento en Descripción de marcador de posición Selectores – selectores de marcador de posición son tipo especial de extender los cuales hablaremos pronto.
Mixins
Mixins son otra característica favorita de los usuarios de preprocesador. Mixins son conjuntos de reglas reutilizables – perfecto para las reglas específicas del proveedor o para shorthanding reglas CSS largas.
¿Qué hay de la creación de una regla de transición para los elementos de sustentación:
11121314 @ mezclar asomar-efecto {-webkit-transición: 200ms fondo de color; -moz-transición: 200ms fondo de color; -o-transición: 200ms fondo de color; transición: 200ms background-color;} a {asomar-efectoinclude;} {.buttoninclude asomar-efecto;}
Mixins también permite utilizar variables para definir los valores dentro del mixin. Podríamos reescribir el ejemplo anterior para darnos control sobre el momento exacto de la transición. Podemos querer botones para la transición un poco más lenta, por ejemplo.
11121314 @ mixin asomar-efecto ($ velocidad) {-webkit-transición: background-color $ velocidad; -moz-transición: background-color $ velocidad; -o-transición: background-color $ velocidad; transición: background-color $ velocidad;} a {include asomar-efecto (200ms);} {.buttoninclude asomar-efecto (300ms);}
Placeholder Selectores
Selectores de marcador de posición se introdujeron con Sass 3.2 y resuelven un problema que podría causar un poco de hinchazón en el código CSS generado. Echa un vistazo a este código que crea mensajes de error:
1617181920ssage {font-size: 1.1em; padding: 11px; border-width: 1px; border-style: sólido;} ssage-peligro {ssageextend; background: # C20030; colores: #fff; border-color: # A8002A;} ssage-éxito {ssageextend; background: # 7EA800; colores: #fff; border-color: # 6B8F00;}
Lo más probable es que la clase mensaje nunca se utilizará en nuestro HTML: se ha creado para ser extendido, no se utiliza de inmediato. Esto causa un poco de hinchazón en su CSS generado. Para hacer que el código sea más eficiente puede utilizar el selector de marcador de posición que se indica con un signo de porcentaje:
1617181920 mensaje% {font-size: 1.1em; padding: 11px; border-width: 1px; border-style: sólido;} ssage-peligro {botónextend%; background: # C20030; colores: #fff; border-color: # A8002A;} ssage-éxito {botónextend%; background: # 7EA800; colores: #fff; border-color: # 6D9700;}
En esta etapa usted puede preguntarse cuál es la diferencia entre extiende y mixins son. Si utiliza marcadores de posición que se comportan como un mixin parámetro menos. Esto es cierto, pero la salida de CSS difiere. La diferencia es que mixins duplican reglas mientras marcadores de posición se asegurarán de que las mismas reglas comparten selectores, lo que resulta en menos CSS en el final.
Operaciones
Es difícil resistir el juego de palabras aquí, pero voy a abstenerse de cualquier chistes médicos por ahora. Los operadores le permiten hacer un poco de matemáticas en el código CSS y puede ser bastante maldito útil. El ejemplo de la guía de Sass es perfecto para la exhibición de esto:
11ntainer {width: 100%; } Artículo {float: left; width: 600px / 960px * 100%;} {lado float: right; width: 300px / 960px * 100%;}
El ejemplo anterior crea un sistema de red basado 960px con un mínimo de molestias. Se compilará abajo muy bien a la siguiente CSS:
111213ntainer {width: 100%;} artículo {float: left; anchura: 62,5%;} {lado float: right; width: 31.25%;}
Una gran uso que encuentro para las operaciones es mezclar colores realidad. Si usted echa un vistazo a el mensaje de éxito por encima de Sass no está claro que el color del fondo y de la frontera tienen algún tipo de relación. Restando un tono de gris podemos oscurecer el color, por lo que la relación visible:
678 $ primaria: # 7EA800; ssage-éxito {botónextend%; background: $ primaria; colores: #fff; border-color: $ primaria – # 111;}
El más claro es el color de resta, más oscura será la sombra resultante será. El más claro es el color añadido, más claro será el tono resultante.
Funciones
Hay un gran número de funciones para utilizar las funciones de: Número, funciones de cadena, funciones de lista, funciones de color y mucho más. Echa un vistazo a la larga lista en la documentación del desarrollador. Voy a echar un vistazo a un par aquí sólo para mostrar cómo funcionan.
La función de aligerar y oscurecer se puede utilizar para cambiar la luminosidad de un color. Esto es mejor que restar tonos, que hace que todo sea aún más modular y obvio. Echa un vistazo a nuestro ejemplo anterior utilizando la función de oscurecimiento.
678 $ primaria: # 7EA800; ssage-éxito {botónextend%; background: $ primaria; colores: #fff; border-color: oscurecer ($ primaria, 5);}
El segundo argumento de la función es el porcentaje de oscurecimiento requerido. Todas las funciones tienen parámetros; echar un vistazo a la documentación para ver lo que son! Aquí están algunas otras funciones de colores fáciles de entender: desaturar, saturar, invertir, escala de grises.
La función ceil, al igual que en PHP, devuelve un número redondeado al siguiente número entero. Esto se puede utilizar en el cálculo de los anchos de columna o si usted no desea utilizar una gran cantidad de cifras decimales en el CSS final.
123.title {font-size: ceil ($ heading_size * 1.3314);}
Información General
Las características en Sass nos dan un gran poder para escribir mejor CSS con menos esfuerzo. El uso adecuado de mixins, se extiende, funciones y variables hará que nuestras hojas de estilo más fácil de mantener, más legible y más fácil de escribir.
Si usted está interesado en otro preprocesador CSS similares Sugiero echar un vistazo a menos (o echa un vistazo a nuestra guía para principiantes) – el director subyacente es la misma!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*