Las hojas de estilo a medida que van creciendo se van transformando en archivos complejos y difíciles de mantener. Todos los que han tenido la oportunidad de crear el frontend de un Sitio Web o Aplicación sabrán de lo que hablo, para los que no a continuación un par de ejemplos:
- Imagínense una hoja de estilos de 3000 líneas de código y tener que buscar entre ese gran documento, una clase específica para agregar un color o cualquier estilo.
- Tienes un Sitio Web listo para llevar a producción, pero al final, te das cuenta que debes aumentar el tamaño de letra a todo el contenido. Te acuestas, lloras por unos minutos y luego buscas línea por línea todos los font-size (propiedad CSS para especificar el tamaño de un texto) y cambias los valores, uno por uno.
Los preprocesadores (Sass, Less o cualquier otro) vienen al rescate, entregándonos características que nos permiten escribir estilos de manera amigable, divertida y estructurada. Me gusta llamarlos CSS con superpoderes.
Para continuar la lectura y aprendizaje de Sass, un paso previo es instalar la herramienta. En el primer artículo de esta serie toqué extensamente el tema: Aprende a instalar y usar Sass, un maravilloso preprocesador de CSS.
¿Instalaron Sass? perfecto, comencemos un repaso de las principales características de la herramienta.
Sintaxis de Sass:
En Sass contamos con dos diferentes tipos de sintaxis: scss y sass.
La primera y más popular es conocida como SCSS (Sassy CSS), es muy similar a la sintaxis nativa de CSS, tanto así que nos permite importar hojas de estilos CSS (copiar y pegar) directamente en un archivo SCSS y obtener un resultado válido. Es muy bueno para personas que estén comenzando con la herramienta y quieran ir llevando poco a poco sus estilos a Sass para ir probando rápidamente sus bondades. Para utilizarla solo debemos crear un archivo con terminación .scss de la siguiente manera: archivo.scss
La segunda opción, es conocida como Indented Syntax (sintaxis de indentación). Utiliza la indentación en lugar de corchetes para expresar el anidamiento de selectores y saltos de línea en lugar de punto y coma para separar las diferentes propiedades que se declaren. Usarla también es muy sencillo, creamos un archivo con terminación .sass de la siguiente manera: archivo.sass
Mi favorita es la primera opción y usaré su sintaxis para todos los ejemplos que escriba en esta serie de artículos. No les recomiendo usar alguna en específico ya que es cuestión de gustos, te invito a probar ambas y seleccionar la que mejor se adapte a tus necesidades.
Es importante mencionar que los archivos pueden ser convertidos automáticamente de una sintaxis a otra utilizando sass-convert desde la línea de comandos:
# Convertir .sass a .scss $ sass-convert archivo.sass archivo.scss # Convertir .scss a .sass $ sass-convert archivo.scss archivo.sass
Crear variables en Sass:
Piensa en las variables como una manera de guardar información que necesites reutilizar en tus hojas de estilos: colores, dimensiones, fuentes o cualquier otro valor. Sass utiliza el símbolo dólar ($) al principio de la palabra clave para crear una variable. A continuación un ejemplo:
// creando variable
$red: #FF0000;
body {
// aplicando el valor de $red
background-color: $red;
}
Trabajar con variables es muy beneficioso, nos permite guardar información importante en el desarrollo y luego poder reutilizarla de una manera fácil y sencilla. En este punto, sirve muy bien el ejemplo que mencioné en un párrafo anterior: Si necesitamos, por nombrar algo, cambiar el tamaño o color de una fuente, simplemente vamos al archivo donde guardamos todas nuestras variables, aplicamos el cambio y éste se actualizará automáticamente en todos los atributos donde utilizamos dicha variable.
Anidar estilos en Sass (Nesting):
Nos permite crear hojas hojas de estilos con jerarquías o niveles. Si le damos un vistazo al código que habitualmente escribimos en HTML, nos daremos cuenta que todo se encuentra organizado de esta manera. Supongamos que tenemos un componente de navegación, el HTML sería algo como esto:
<nav class="main-nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
La etiqueta principal del componente es <nav></nav>, el hijo viene siendo <ul></ul>, los hijos de <ul> son los <li></li> y así sucesivamente. Usando Sass, podemos conseguir un comportamiento similar que nos permite encapsular fragmentos de código dentro de una clase. A continuación, seguimos el ejemplo dándole un poco de estilo al componente de navegación:
// ejemplo de anidamiento
// primer nivel
.main-nav {
// segundo nivel
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
a {
display: block;
text-decoration: none;
// tercer nivel
&:hover {
text-decoration: underline;
}
}
}
Un punto importante que podemos apreciar en el ejemplo anterior, es el símbolo &, el cual hace referencia al elemento padre. En nuestro ejemplo se refiere a la etiqueta enlace «a».
Siguiendo con el análisis del ejemplo, podemos darnos cuenta que a pesar de que «li» y «a», en teoría, deberían ir anidados dentro de «ul» no lo coloqué de esta manera. Es primordial tener siempre presente no abusar de esta característica, la clave para que nuestras hojas de estilos sean claras y mantenibles es tratar en lo posible de que el anidamiento no sea mayor a tres o cuatro niveles.
Por esta razón, es necesario antes de comenzar a dar estilos, tomarnos unos minutos para estudiar el componente que vamos a estilizar y mentalmente organizar cómo debemos abordar el problema para atacarlo de la mejor manera posible, sin utilizar anidamientos extras que solo aumentarán el grado de complejidad. Si ya tenemos definido que vamos a estilizar un componente de navegación, caracterizado por la clase .main-nav, el cual contiene una lista desordenada de enlaces. Podemos intuir que los enlaces «a» y cada elemento de la lista desordenada «li», no requieren estar en un tercer nivel de anidamiento para funcionar de manera adecuada.
La traducción que hará Sass del código anterior a CSS será el siguiente:
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav li {
display: inline-block;
}
.main-nav a {
display: block;
text-decoration: none;
}
.main-nav a:hover {
text-decoration: underline;
}
Tipos de archivos en Sass:
En Sass, existen dos tipos de archivos:
Maestros:
Los maestros, son los archivos que Sass tomará para realizar el proceso de traducción o conversión de Sass a CSS. En ellos, se agregan estilos e importamos todos los parciales (partials) que necesitemos sean llevados a la hoja de estilo que se utilizará en el Sitio Web o Aplicación que estamos trabajando.
Parciales (Partials):
Sass nos brinda la posibilidad de crear archivos con pequeños fragmentos de estilos, y estos son procesados sólo cuando los incluimos a los archivos maestros. Es un excelente recurso que nos permite separar separar y organizar nuestros estilos en pequeños fragmentos, consiguiendo una mayor legibilidad y facilitando el proceso de depuración.
Un parcial es un simple archivo de Sass nombrado al comienzo con un piso (underscore), de esta manera: _parcial.scss. El piso (underscore) le dirá a Sass que el archivo es únicamente un parcial y que no debe ser procesado por sí solo. Los parciales en Sass son usados con la directiva @import.
Recomendación:
No tengan miedo a separar sus hojas de estilos en pequeños fragmentos, todo lo contrario, es importante hacerlo, a medida que el proyecto en el que estén trabajando vaya tomando forma y se haga cada vez más grande, se darán cuenta que utilizar este recurso es la tarea más maravillosa que han podido hacer. Divide y vencerás ;)
Me gusta mucho crear un archivo por componente y que mis parciales no tengan más de 150 líneas. Es una regla que sigo a diario y me ha dado muy buenos resultados.
Uso de la directiva @import en Sass:
Es bastante sencillo, se utiliza de la misma manera que la regla @import de CSS. Si no han tenido oportunidad de utilizarla no se preocupen, a continuación un ejemplo, breve explicación y diferencias:
La diferencia entre la directiva @import de Sass y la regla @import de CSS, es que la segunda requiere que por cada vez que usamos la regla se genere una nueva solicitud HTTP, haciendo que la velocidad de carga de nuestro sitio se vea afectada sí contamos con muchas solicitudes. La directiva @import de Sass, no requiere ninguna solicitud HTTP, recuerden: Sass combina los parciales (partials), procesa los estilos y los compila dentro de un archivo de CSS, el cual será utilizado en nuestro Sitio Web o Aplicación.
Supongamos que tenemos dos parciales y un maestro. Queremos que los parciales se importen al archivo maestro y luego Sass procese todo como un único documento.
body,
html,
ol,
ul {
margin: 0;
padding: 0;
}
$txt-size: 16px; $txt-color: #333;
@import 'reset';
@import 'vars';
body {
color: $txt-color;
font-size: $txt-size;
}
Fíjense que usando la directiva @import no es necesario incluir la extensión del archivo .scss, Sass es inteligente y va a averiguarlo por ti.
Cuando generes el CSS obtendrás lo siguiente:
body, html, ol, ul {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 16px;
}
Puedes tener todos los archivos maestros que desees. Me gusta mucho trabajar con un archivo maestro para estilos comunes y separar en archivos maestros independientes los estilos específicos para cada página. Es decir, cargar dos archivos CSS por página, siempre y cuando la página en cuestión requiera estilos únicos. De esta manera, consigo optimizar y cargar solo estilos necesarios para cada sección del proyecto que esté desarrollando.
Recomendación:
Es importante no abusar de los archivos maestros y recomiendo máximo utilizar dos por página, recuerden el problema con la regla @import de CSS, podemos ocasionar el mismo cuello de botella o uno peor con varios archivos maestros.
Sass desde la Línea de Comandos:
En el primer artículo de esta serie, comenté mi intención de invitarlos a probar Sass desde la Línea de Comandos. El proceso de instalación lo realizamos mediante ella y nos dimos cuenta que es bastante fácil usar. Hoy quiero ampliar un poco esa documentación, mostrándoles la manera de comenzar a trabajar con Sass; las diferentes opciones que tenemos, cuales son sus ventajas y desventajas.
Primeramente, debemos abrir la consola de comandos de nuestra preferencia y posicionarnos en el directorio principal del proyecto que estamos desarrollando:
$ cd nombre-proyecto/
Seguidamente, vamos al directorio donde guardamos nuestros estilos. Supongamos que se encuentran en el directorio /assets
$ cd assets/
La manera más sencilla de trabajar con Sass:
$ sass base.scss base.css
Ejecutamos Sass y le pasamos dos parámetros, el primero es el archivo .scss que necesitamos procesar y el segundo es el nombre del archivo donde se generarán todos los estilos que hemos creado. Es la opción más básica de trabajar con Sass, el punto flojo de esta opción es que debemos ejecutarlo cada vez que realicemos cambios. No es lo más productivo.
Sass fue creado para hacernos la vida más fácil, es por eso que podemos decirle al ejecutarlo que se mantenga activo revisando y procesando cada cambio que realicemos, mediante la opción watch.
$ sass --watch base.scss:base.css
Lo comentado anteriormente, sirve para realizar pequeñas pruebas, pero imagínense tener varios archivos maestros y abrir una nueva consola de comandos por archivo, caemos en lo mismo de la primera opción: productividad cero. Para evitar este problema, podemos indicarle a Sass que se mantenga revisando un directorio y no un archivo:
$ sass --watch scss:css
Con esto lograremos que Sass busque todos los archivos maestros en el directorio /scss y los procese al directorio /css.
Maneras de impresión de Estilos en Sass:
Al momento de procesar nuestros archivos maestros, Sass nos permite seleccionar entre cuatro diferentes maneras de imprimir los estilos generados. Debemos agregar a cualquiera de los comandos de ejecución repasados en párrafos anterior, la opción –style seguida de la opción de nuestra preferencia (nested, expanded, compact, compressed).
Nested:
Viene por defecto en Sass, el concepto es el mismo al comentado cuando hablamos de la característica de anidamiento. Básicamente, utiliza espacios para identificar los atributos anidados a una clase. Esto hace que la lectura de archivos CSS sea más sencilla. Por ejemplo:
article {
background-color: #CCCCCC; }
article h2 {
color: #333333;
margin: 10px 0; }
Expanded:
Es la manera más parecida a la utilizada por todos nosotros al momento de escribir estilos. Cada una de las propiedades y reglas ocupan una línea, sin espacios especiales. Ejemplo:
article {
background-color: #CCCCCC;
}
article p {
color: #333333;
margin: 10px 0;
}
Compact:
Ocupa menos espacio que el estilo Expandido (Expanded) y Anidado (Nested). Básicamente, imprime en una línea cada regla con todas sus propiedades.
article { background-color: #CCCCCC; }
article p { color: #333333; margin: 10px 0; }
Compressed:
El estilo comprimido, es el que se encarga de imprimir estilos de la manera más reducida posible, no hay saltos de línea, excepto al final del archivo. Es recomendable su utilización al finalizar un proyecto, para conseguir optimizar al máximo los estilos generados con Sass.
article{background-color:#CCC;}article p{color:#333;margin:10px 0;}
También se encarga de seleccionar la expresión reducida de los colores. Por ejemplo: si en algún lugar de nuestros archivos .scss declaramos el color #000000 (negro) y luego procesamos con la opción compressed, nos imprimirá #000.
Hemos repasado las características principales y básicas de Sass, aún nos quedan tres conceptos importantes que vamos a dejar para un nuevo artículo, me refiero a los Extends, Mixins y Operators. Los dos primeros, suelen confundir a los programadores dado su grado de similitud; por lo que voy a darles mayor atención y dedicarles un artículo completo para hablar de ellos y aclararles así todas las dudas que se me presentaron cuando comencé a utilizarlos.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Aprende a instalar y usar Sass, un maravilloso preprocesador de CSS Lección siguiente Aprende Sass: Operators, Mixins y Extends