Stylus es un pre-procesador de CSS que posee una sintaxis peculiar ya que trabaja sobre indentación para establecer la jerarquía de los selectores y se pueden omitir por completo las llaves {}, los dos puntos : y los punto y coma ;. La compilación a CSS se encargará de poner todos estos detalles en el archivo CSS final.
💡 Stylus esta construido sobre NodeJS.
Por lo que para compilar Stylus necesitamos tener instalado NodeJS o utilizar una UI como Prepos.
Si ya tenemos instalado NodeJS el siguiente paso es instalar Stylus, recordar que necesitamos instalar el paquete de forma global por lo que debemos de realizar la instalación con permisos de administrador.
$ npm install -g stylus
El siguiente comando nos permite validar que Stylus se instaló de forma correcta.
$ stylus -v
Una vez que Stylus esta instalado podemos compilar nuestros archivos .styl al tradicional .css. Eso se realiza con el siguiente comando:
$ stylus style.styl
Después de ejecutar el comando nos aparecerá este mensaje compiled style.css, que nos indica que se creo el archivo con la extensión .css, por lo tanto nuestra compilación fue exitosa.
Hay algunas aplicaciones que permiten procesar archivos de Stylus como lo son:
Además estas aplicaciones incorporan varios pre-procesadores como lo pueden ser Less o SASS. Así como herramientas adicionales como el live reload, debuger, entre otras.
La sintaxis de Stylus es muy amigable puesto que como ya mencioné solo depende de la indentación para trabajar. Un ejemplo de su sintaxis es el siguiente:
bodybackground: #000El cual en código CSS sería:
body {
background: #000;
}
Como podemos observar se simplifica notablemente la sintaxis respecto al CSS tradicional.
💡 Stylus también permite omitir los : entre la propiedad y el valor.
Bueno, ¿y qué pasa cuando queremos afectar a los elementos hijos de un selector? para esto tenemos las anidaciones ya que haciendo uso de esta funcionalidad podemos hacer referencia a:
Todos los elementos dentro de una etiqueta.
→ [ Stylus ]
bodycolor: #F9F38Ftext-decoration: underline
→ [ CSS ]
body {
color: #f9f38f;
text-decoration: underline;
}
Los hijos directos del elemento padre.
→ [ Stylus ]
bodycolor: #F9F38Ftext-decoration: underline
// Referenciando al hijo
> .primerhijomargin-bottom: 24px→ [ CSS ]
body {
color: #f9f38f;
text-decoration: underline;
}
body > .primerhijo {
margin-bottom: 24px;
}
El elemento padre.
→ [ Stylus ]
//-- Métodología BEM// Bloque
.btn
background-color: pink
border-radius: 2px
// Modificador
&--alert
background-color: red→ [ CSS ]
.btn {
background-color: #ffc0cb;
border-radius: 2px;
}
.btn--alert {
background-color: #f00;
}
❗️ No realizar más de tres anidaciones.
Las variables también existen en CSS gracias al esfuerzo de muchos y además por haber sido implementadas inicialmente en los pre-procesadores. Stylus también acepta el uso de variables lo cual ayuda a mantener el código escrito de una forma más eficiente.
Las variables se declaran al inicio del documento como buena práctica.
// Declaración de las variablesfont-size-small = 14px
p
font-size: font-size-small
Es posible también escapar una variable, supongamos que queremos usar sans-serif como un string solamente, entonces utilizamos el siguiente código.
.psudoelement
font-size: font-size-normal
&::before
content: unquote("sans-serif")
Al utilizar un pre-procesador no es la idea tener todos los estilos en un sólo archivo, Stylus nos permite modularizar nuestro código. Esto es generar archivos parciales del código he integrarlos en un archivo final, este archivo final será el único que se compile.
Los archivos parciales se crean de igual forma, pero en su nombre se antepone un _ para indicarle al compilador que no compile ese archivo.
Lo más usual es tener un archivo único para las variables por lo tanto este archivo se definiría cómo _variables.styl y para integrarlo en nuestro archivo principal hacemos uso del @import, lo cual luce así en código.
@import "_variables.styl"Esto nos permite estructurar nuestro proyecto de forma modular y tener segmentado cada funcionalidad de nuestros estilos. Un ejemplo de como quedaría la estructura del mismo sería el siguiente:
|| - utilities/|| - _variables.styl|| - _funtctions.styl|| - _mixins.styl|| - base/|| - _reset.styl|| - _typography.styl|| - components/|| - _buttons.styl|| - _carousel.styl|| - _slider.styl|| - layout/|| - _navigation.styl|| - _grid.styl|| - _header.styl|| - _footer.styl|| - _sidebar.styl|| - _forms.styl|| - pages/|| - _home.styl|| - _about.styl|| - _contact.styl|| - themes/|| - _theme.styl|| - _admin.styl|| - vendors/|| - _bootstrap.styl|| - _jquery-ui.styl|| - main.stylUn mixin permite aprovechar trozos de nuestro código al que podemos llamar repetidamente y encapsular una o más líneas de código. Esto es especialmente útil cuando se trabaja bajo la premisa DRY, Don’t Repeat Yourself.
Básicamente nos permiten agrupar valores CSS para mejorar su eficiencia.
mixin-max-width():
max-width: 90%
margin: 0autoY para hacer uso de dicho mixin se manda a llamar en el selector deseado.
.container
mixin-max-width()
Como buena práctica se recomienda anteponer “mixin-” al nombre de dicho mixin como se mostró en el ejemplo.
<h3>Mixins Paramétricos</h3>Los mixins también puede recibir parámetros, dichos parámetros se declaran dentro de los paréntesis y pueden venir ya con un valor definido que sería el valor base.
→ Mixin con parametro sin definir.
// Definición del mixin
mixin-max-width(width):
max-width: width
margin: 0auto// Uso del mixin
.container
mixin-max-width(800px)
→ Mixin con parametro definido.
mixin-max-width(width = 800px):
max-width: width
margin: 0auto// Uso del mixin
.container
mixin-max-width()
En Stylus podemos asignar variables dinámicas y a las cuales les asignaremos funciones matemáticas que se ejecutaran cada que sean llamadas. Un ejemplo de esto sería el siguiente código:
→ [ Stylus ]
// Definición de la función internamixin-padding-small(value):
value + 10px// Uso de la función internabodypadding: mixin-padding-small(2px)
→ [ CSS ]
body {
padding: 12px
}
💡 La diferencia entre las funciones internas y un mixin tradicional es que las funciones devuelven un valor, en el caso del código ejemplo devuelven el resultado de la operación matemática.
Stylus admite diversas funciones matemáticas como la suma, esto lo podemos revisar en su documentación oficial.
Como todo buen pre-procesador Stylus también maneja condicionales. Esto es muy útil para muchísimas funciones, por ejemplo cuando queremos dar soporte a un navegador en especifico Internet-Explorer.
Los condicionales se pueden utilizar de la siguiente forma:
mixin-box(x, y, margin-only = true)ifmargin-only
margin: x y
elsepadding: x y
El código anterior define que si margin-only es true, entonces la caja tendrá el margin definido, pero si no, se definirá un padding.
Los ciclos dentro de Stylus nos permiten repetir código un determinado número de veces. Esto es útil cuando queremos asignar por ejemplo las mismas propiedades a diferentes clases.
Veamos un ejemplo para hacer esta parte más entendible.
→ [ Style ]
grid-size = (1..2)
.griddisplay: flex
flex-wrap: wrap
position: relative
flex-direction: row
[class^="grid--item"]
flex-shrink: 0margin-right: 0flex-grow: 1foriin grid-size
.grid--item-{i}
width: (100 / i) * 1%→ [ CSS ]
.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
[class^="grid--item"] {
-ms-flex-negative: 0;
flex-shrink: 0;
margin-right: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.grid--item-1 {
width: 100%;
}
.grid--item-2 {
width: 50%;
}
Este articulo también lo puede encontrar en Medium. Donde también escribo más artículos o al menos lo intento 👌🏻 y si gustan también me pueden seguir en Twitter.
