Hace un tiempo, Thoriq Firdaus escribió un excelente artículo sobre cómo comenzar con Sass que le mostraba cómo instalar y usar este lenguaje de preprocesador CSS altamente útil (es posible que desee consultarlo, ya sabe, para comenzar).
En este artículo pensé en brindarte un poco más de información sobre lo que puedes hacer con Sass y cómo los desarrolladores lo usan todos los días para crear código CSS mejor y más modular. Salta a la sección que desees:
Herramientas del oficio
Thoriq le mostró cómo puede usar Sass desde la línea de comando usando el comando sass –watch.
Si prefieres las herramientas GUI, puedes optar por mi aplicación favorita. kit de códigosuna 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 valen la pena si los vas a utilizar a largo plazo.
Si solo quieres probar Sass sin pagar por nada puedes usar la terminal, o Aplicación exploradorauna aplicación gratuita multiplataforma rica en funciones, que puede mantenerse firme frente a sus homólogas premium.
variables
Una de las primeras cosas que tendrás que entender son las variables. Si tiene experiencia en PHP u otro lenguaje de codificación similar, esto será algo natural para usted. Las variables son para almacenar fragmentos de información reutilizablecomo un valor de color, por ejemplo:
$primary_color: #666666;
.button {
color: $primary_color;
}
.important {
color: $primary_color;
}
Puede que esto no parezca 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 de la variable $primary_color 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 las variables en un archivo separado (pronto veremos cómo se hace esto).
Lo que esto te permite hacer es cambiar el color de todo tu proyecto y cambiar las fuentes y otros aspectos clave. sin siquiera tocar las reglas CSS reales. Todo lo que necesitas hacer es modificar algunas variables.
Anidación
Otra característica básica que te ofrece Sass es la capacidad de anidar reglas. Supongamos que está creando un menú de navegación. Tiene un elemento de navegación 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 las selectoras 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 podría verse 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 utilizar el anidamiento junto con la sangría adecuada, puede lograr estructuras de código altamente legiblesincluso si tienes una buena cantidad de código.
Una desventaja del anidamiento es que puede conducir a una especificidad innecesaria. En el ejemplo anterior me he referido a enlaces con #header nav a. También puedes 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 necesitas hacer es anidar tus 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 */
}
}
}
}
}
Ampliar conjuntos de reglas
La extensión le resultará familiar si trabaja con lenguajes orientados a objetos. Se entiende mejor con 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;
}
Las clases .button-primary y .button-small amplían la clase .button, lo que significa que toman todas sus propiedades y luego definen las suyas propias.
Esto es inmensamente útil en muchas situaciones en las que se pueden utilizar variaciones de un elemento. Los mensajes (alerta/éxito/error), botones (colores, tamaños), tipos de menú, etc. podrían utilizar la funcionalidad de extensión para una gran eficiencia de CSS.
Una advertencia sobre las extensiones es que no funcionarán en consultas de medios como era de esperar. Esto es un poco más avanzado pero puedes leer todo sobre este comportamiento en Comprender los selectores de marcadores 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 simplificar reglas CSS largas.
¿Qué tal crear una regla de transición para 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 Danos control sobre el tiempo exacto de la transición.. Es posible que queramos que los botones realicen una transición un poquito más lenta, 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 podí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 mensaje nunca sea utilizada en nuestro HTML: ha sido creado para ser ampliado, no utilizado tal cual. Esto provoca un poco de hinchazón en el CSS generado. Para hacer que su código sea más eficiente, puede utilizar 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 quizás te preguntes cuál es la diferencia entre extensiones y mixins. Si utiliza marcadores de posición, se comportan como un mixin sin parámetros. Esto es cierto, pero el resultado en CSS es diferente. La diferencia es que mixins duplican reglas mientras Los marcadores de posición se asegurarán de que las mismas reglas compartan selectores.lo que resulta en menos CSS al final.
Operaciones
Es difícil resistirse al juego de palabras aquí, pero por ahora me abstendré de hacer bromas médicas. Los operadores te permiten hacer algunos cálculos en tu código CSS y pueden ser muy útiles. El ejemplo en el guía descarada 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 con 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 echas un vistazo al mensaje de éxito Sass arriba, no está claro que el color del fondo y el borde tengan algún tipo de relación. Restando 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 restado, 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. Echa un vistazo a la larga lista en el documentación del desarrollador. Echaré un vistazo a un par aquí solo para mostrarte cómo funcionan.
La función de aclarar y oscurecer se puede utilizar para cambiar la claridad 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.
$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; ¡Echa un vistazo a la documentación para ver cuáles son! Aquí hay algunas otras funciones de color que se explican por sí mismas: desaturar, saturar, invertir y 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 al calcular el ancho de las columnas o si no desea utilizar muchos 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, se utiliza una función incorporada especial como var_dump (PHP) o console.log (JavaScript). Sass, en este caso, proporciona directivas especiales, @debug, @warn y @error, para realizar fácilmente la depuración en Sass.
A continuación se muestra un ejemplo para volcar un valor de variable usando @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
Podemos usar @warn para enviar un aviso, por ejemplo, si algunos valores no están validados.
$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 color del fondo como el 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 está validado, 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 funciones 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 fáciles de mantener, 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 MENOS (o consulte nuestra guía para principiantes): ¡el principal subyacente es prácticamente el mismo!
