3 min to read
SASS Poderoso!
Hola amigos! Hoy tengo ganas de escribir sobre una de las 7 maravillas del mundo:
Como ya saben, SASS es un preprocesador que nos permite manipular nuestro CSS de forma más amigable y con super poderes, si, leíste bien.
Mi idea en este blog, es compartir pequeñas dosis de bases técnicas, tips o incluso experiencias mientras metemos un poco de magia y #codeamos :)
Empecemos por… $variables? Y daaaale!
Variables
Las variables en SASS son bastante útiles, ya que nos permiten manipular y escalar nuestro CSS mediante valores dinámicos. Por ejemplo, el clásico uso se ve en los $colores. Personalmente, aplico en casi todos mis proyectos la nomenclatura de colores según la herramienta Name That Color.
Nuestra paleta de colores en los proyectos suele ser chica/mediana, pero igualmente la variedad de colores en web es increíble, por lo que, es una herramienta que nos ayuda bastante a gestionar los nombres de los mismos. De esta manera, podemos tener en un archivo _variables.scss algo como:
$cornflower: #6195ED;
$nepal: #8B9DBB;
$crimson: #D51A49;
Asimismo, podemos aplicar estas variables para cualquier valor que se nos ocurra, por ejemplo $grid, $font-size, $margins, $flex-property, $base-width, el nombre de la variable lo elegimos nosotros como siempre, pero la idea es ver un poco qué tan flexible y útil puede ser para nuestros estilos implementar valores dinámicos de ciertos aspectos, lo vamos a ver más claro y en detalle en la seccion Mixins del próximo post!
Para que apreciemos el concepto y powaaaa, podemos pensar en un re-branding o theming de un proyecto, modificar cada hexa y color sería un dolor de cabeza, ni hablar de cambios visuales a nivel pixeles generales.. en cambio, si usamos variables unificadas en los layouts, un theming o personalización de diseño sería mucho más simple, ágil y flexible de implementar y escalar.
Importing
Así como podemos importar el archivo _variable.scss que hablamos antes, gracias al poder de SASS, ya podemos usar esas variables que declaramos a lo largo de todo nuestro proyecto. Sólo debemos tener en cuenta que podemos importar directamente con paths o podemos usar algo como un index. Si agregamos un _index.scss en una carpeta cualquiera, vamos a ponerle styles con la siguiente línea:
@import 'variables';
Cuando deseemos importar la carpeta styles, automáticamente nos va a tomar el index.scss, que a su vez va a tomar su import correspondiente (variables en este caso). Así que conceptualmente, importando la carpeta styles, ya sabemos que tendremos acceso free a las variables :D
@import 'styles';
Nesting
Otra belleza que nos regala SASS
Gracias al anidamiento ya no necesitamos escribir explícitamente todas las clases o selectores habidos y por haber, cada vez que queremos hacer algo, vamos a ver un ejemplo breve y claro:
Para un navigation, antes teníamos que hacer:
nav ul {
bla bla bla
}
nav li {
display: inline-block
}
nav a {
display: block;
}
En cambio con SASS, podemos traducir eso en:
nav {
ul {
bla bla bla
}
li {
display: inline-block
}
a {
display: block;
}
}
El código es mucho más legible de esta manera, a medida que nos vamos acostumbrando, por más que cambiemos de proyecto/equipo etc, podemos comprender estas anidaciones y encontrar rápidamente lo que buscamos. Y si a esto le sumamos la metodología BEM, es como tocar el cielo con las manos, ah que le pasaba jajajajaja ese lo dejamos para el próximo post, para no extender esta pequeña lecturiñaaa, hasta pronto, happy coding!
