¿Preprocesar o no preprocesar? Una inmersión a SASS.
No importa qué, no importa cómo, la realidad es que a todo el mundo le gusta que su trabajo tenga buena pinta y de ser posible que le sea de agrado a los demás, al desarrollar paginas web nos encontramos con que nuestra forma de lograr esto es explotando al máximo las hojas de estilos (y claramente una buena estructura HTML).
¿El problema?
Cuando uno tiene grandes páginas con miles de usuarios suele tener hojas de estilos aún más grandes con montones de líneas que resultan prácticamente imposibles de mantener, de modo que podemos rezar para que nadie quiera cambiar el color de la marca o bien podemos usar un preprocesador de hojas de estilo.
SASS es un preprocesador escrito en Ruby (uno de los lenguajes de programación más populares para desarrollo backend) el cual nos ayuda a extender el poder de CSS y volverlo mucho más mantenible, es decir, si en algún momento queremos modificar algo nos sea fácil hacer ese cambio ¿Cómo? Nosotros escribimos un archivo .sass o .scss, estos archivos tienen una sintaxis muy parecida a CSS, la mayor diferencia es que en estos archivos podemos:
- Usar variables
- Anidar componentes
- Heredar propiedades(Extender elementos)
- Segmentar en módulos (Función import de CSS eficiente)
- Realizar operaciones matemáticas
- Implementar mixins(Plantillas que nos permiten reciclar atributos al darle un parámetro)
- Usar estructuras de control
- Usar funciones
esto es como tener un CSS con las ventajas que nos brinda un lenguaje de programación, sin embargo, los navegadores no hablan ni .sass ni .scss, de modo que debemos procesarlos y generar una hoja de estilos que entienda el navegador, para esto usamos SASS
¿Por qué dos tipos de archivo diferentes?
El preprocesador nos permite escribir usando la sintaxis Sass y CSS (.scss), su sintaxis es una extensión del CSS de hoy en día, usa una estructura de corchetes y es la sintaxis más nueva que busca remplazar a su predecesor .sass
/* ejemplo.scss */
/* Muy parecido a un CSS */
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}Los archivos SASS fueron la primer sintaxis impuesta y se basan en:
- Indentación
- Saltos de línea.
En lugar del uso de:
- Corchetes
- “Punto y coma”
Estos suelen verse mas limpios al poseer menos caracteres y regirse por los espacios, sin embargo, no podemos escribirlo como un css y esperar que sea válido.
/* ejemplo.sass */
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: noneEjemplo
Para poder seguir el ejemplo es necesario tener instalado SASS y por ende, Ruby, para más instrucciones referente a la instalación les recomiendo seguir esta página.
Crearemos un folder para nuestro proyecto y usaremos SCSS debido a que es la sintaxis mas nueva, imaginemos que tenemos una página que incluye una lista, como lo muestra el siguiente html:
como podemos ver en la linea 5, el html esta referenciando a una hoja de estilos test.css la cual se encuentra en un folder llamado sass (creemoslo), este archivo NO sera escrito por nosotros, lo generara el preprocesador, para que esto sea posible debemos crear un archivo llamado test.scss dentro de este mismo folder. Una vez creado ya podemos ejecutar en la terminal (Estando en la raíz del proyecto):
sass --watch sass/Este comando lo que hace, es estar detectando cambios en los archivos .scss y .sass dentro del folder sass/ y cuando detecte alguno, creara un archivo css con base en los archivos preprocesados que encuentre.
Debemos escribir este código dentro de test.scss (Lo veremos mas abajo en un .gif)y veremos como automáticamente, tendremos un archivo test.css y sera algo así:
Como podemos ver, en el CSS no se encuentran las declaraciones de variables/funciones y el preprocesador ajusta los objetos anidados de modo que CSS lo pueda entender, así mismo elimina los comentarios de 1 linea, dado que eso no existe en CSS pero deja los que son de múltiples lineas.
Si comenzamos a modificar el archivo .scss podemos ver como en automático, se genera una nueva hoja de estilos que cumpla con la modificación, abajo tenemos un .gif en el cual cambiamos 1 variable que es usada en 1 función y vemos como todo lo demás se actualiza, cabe decir cómo el selector ‘$’ nos sirve para declarar y acceder a variables.
Al final ambos tipos de archivos nos permiten generar una hoja de estilos con el formato CSS , la diferencia es que aquí tenemos a la mano funcionalidades que no nos brinda un CSS normal y podemos trabajar de una manera mas eficiente y limpia, es importante recalcar que SASS no es el único preprocesador que hace esto, existen múltiples alternativas para implementar algunas de estas funcionalidades en CSS, siendo dos de las mas populares LESS y Stylus.
