Saltear al contenido principal

Stylus: Variables, mixins, condicionales y funciones

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:
stylus combinaciones variables
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.

También te puede interesar:   Stylus: El preprocesador que te facilita a manejar mejor tus estilos

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:
stylus propiedad estilo padre
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

Calificar

Blogger y Especialista SEO LATAM, me gusta ayudar creando contenidos sobre SEO, Marketing Online y Tendencias Digitales. Trabajo como apoyo en varias agencias SEO & digitales en todo LATAM, como también realizo asesorías y campañas SEO Internacional en Argentina, Colombia, Chile, México, Perú, España y Estados Unidos. Como profesional de SEO & Marketing Online, brindo todo lo mejor para cumplir los objetivos deseados para cada negocio y empresa a través de campañas orgánicas. Sígueme en Twitter @Fotosarnold.

También te puede interesar...
banner hablemos de seo
Suscríbete a Nuestro Newsletter

No te pierdas las últimas actualizaciones sobre SEO y Marketing Online, manténte notificado y entérate todo con las mejores noticias!

Comentarios

Esta entrada tiene 0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Volver arriba