Stylus: Variables, mixins, condicionales y funciones

Ha visto anteriormente algunos ejemplos de cómo las variables, mixins, verificaciones condicionales y funciones se ven en MENOS y Sass. A mi ojo, encuentro el enfoque de la aguja a estos más fáciles de mirar, leer y trabajar en general.

En MENOS, las variables deben ser precedidas con el símbolo @. En Sass, deben ser añadidos con el símbolo $. Sin embargo, en Stylus, una variable no tiene que ser prepended con nada en absoluto.

Nota: Opcionalmente puede usar el símbolo $ si lo prefiere, pero no el símbolo @ ya que está reservado para otros propósitos en Stylus.

Del mismo modo, combinaciones, las comprobaciones condicionales y las funciones no necesitan ser prependidos con nada en Stylus.

En LESS, un mixin debe escribirse de la misma manera que escribiría una clase CSS regular, y no hay cheques condicionales ni funciones personalizadas.

En Sass, los mixins deben ser agregados previamente con @mixin y llamados con @include, las comprobaciones condicionales se escriben como @if y @else, y las funciones deben estar precedidas con @function e incluir una línea prepended con @return.

Ninguna de estas cosas se requiere en Stylus. Usted puede escribir simplemente naturalmente como usted puede en lenguaje regular. Por ejemplo, antes utilizamos este ejemplo Sass mixin y función:

@mixin border_and_bg( $border_on, $border_color, $bg_on, $bg_color ){     @if $border_on == true {         border: 1px solid $border_color;     } @else {         border: 0;     }     @if $bg_on == true {         background-color: 1px solid $bg_color;     } @else {         background-color: transparent;     } }

@function function-name($parameter) {   @return $dosomething + $parameter / $somethingelse; }

 

Este mixin y función se llamaría así:

.callem {     @include border_and_bg(true, #000, true, #fff);     font-size: function-name( 6 ); }

En Stylus, estos podrían escribirse y llamarse de la siguiente manera:

Esto para mí es muy ordenado, fácil de leer y escribir, y en consonancia con la meta del preprocesador de hacer el código limpio y mínimo.

Tenga en cuenta también que mientras en el ejemplo anterior he omitido toda la sintaxis (puntuación) que se puede dejar de lado, es totalmente opcional cuánto de él desea dejar de lado en su desarrollo.

Por ejemplo, he llamado a border_and_bg mixins sin problemas, escribiéndolo en esencialmente la misma manera que una propiedad CSS regular, sin paréntesis alrededor de los parámetros o comas entre ellos. Sin embargo, si prefieres puedes incluir paréntesis y comas cuando llamas a mixins, es completamente tuyo.

La Libreria de mixins Nib 

Una de las mejores cosas de trabajar con Sass y LESS son las bibliotecas Compass / Bourbon y LESShat mixin, respectivamente. Pero no te pierdas una increíble biblioteca de mezclas con Stylus, gracias a Nib.

El paquete “StylusCompiler” que le proporcioné automáticamente instala (gracias a grunt-contrib-stylus) e incluye Nib en su proyecto, por lo que no tiene que tomar más pasos para usarlo.

Nib proporciona mixins para todos los efectos CSS3 que se esperan, cada uno de los cuales se puede llamar sin problemas como si se utilizara una propiedad CSS regular. También incluye una impresionante gama de mezclas para otras funciones como posicionamiento, restablecimiento / normalización, corrección, imágenes sensibles y mucho más.

Echa un vistazo a los documentos para un resumen completo aquí: https://github.com/tj/nib

Nota: Una segunda opción de biblioteca de mezclas para Stylus es Axis.

Otros Loveable Stylus Goodness

Stylus tiene un montón de otras características impresionantes, hecho en su propia manera única y super limpia, y usted realmente debe comprobar el conjunto aquí: http://learnboost.github.io/stylus/

Sin embargo, hay una pareja en particular que me encanta.

Parámetros de descanso

Los parámetros de reposo le permiten pasar un número indeterminado de valores a un mixin sin tener que explícitamente asignarlos en la creación de la mezcla. Puede extraer un valor en particular y, a continuación, pasar el “resto” mediante args … y args. Por ejemplo:

Búsqueda de propiedades

A veces puede estar repitiendo un cierto valor un par de veces, pero sólo dentro de un solo estilo, por lo que tener que declarar una variable para mantenerlo puede ser excesivo.

Con la función de búsqueda de propiedades, puede buscar el valor de cualquier propiedad que haya declarado en el mismo estilo o en un estilo padre. Por ejemplo:

Todo lo que tiene que hacer es utilizar el símbolo @ antes de la propiedad que desea buscar. La aguja se verá primero en el mismo estilo y, si no encuentra coincidencia, comprobará los padres y continuará burbujeando hasta que obtiene una coincidencia o llega a la raíz del documento y devuelve “nulo”.

envolviendo y algunos útiles finales de la aguja

Espero que ahora te sientas listo para abordar la creación de Stylus si has sido cauteloso de la línea de comandos antes, y tienes curiosidad suficiente para investigar si te gusta el poder de Sass pero preferiría trabajar con Node.js sobre Ruby. Y aunque ninguno de esos dos sean especialmente relevantes para usted, espero que esté intrigado lo suficiente por algunos de los enfoques únicos adoptados por Stylus para hacerla girar y tener un juego con ella.

Para terminar, me gustaría dejarte con una lista de interesantes regalos relacionados con Stylus para que puedas echar un vistazo a través de, algunos mencionados en el anterior, así como algunos extras.

https://webdesign.tutsplus.com/articles/why-i-choose-stylus-and-you-should-too–webdesign-18412