• Sobre mí
  • Hablemos de SEO
  • Link Building
  • Publicidad
  • Sígueme:
  • @FotosArnold
  • @Arnoldperu
  • @arnoldperu

Arnold Gutierrez

  • Qué es SEO
  • Mitos SEO
  • Qués es EAT
  • Qué es Inbound Maketing
  • Eventos
  • Inicio
  • SEO
  • SEM
    • Google Ads
  • Marketing Digital
    • Análitica Web
    • Estrategias de Mailing
  • eCommerce
  • Google Adsense
  • Marketing de Contenidos
  • WordPress
    • Tutorial Codex
    • Plugins
    • Blogs
  • Desarrollo Web
    • Diseño Web
    • Swift

Stylus: Variables, mixins, condicionales y funciones

stylus mixins variables y condicionales

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:

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.

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

Dic 7, 2016Arnold Gutierrrez
Calificación del contenido

Comparte tu nuevo conocimiento con tus seguidores

  • Twitter
  • Facebook
  • LinkedIn

Relacionado

Stylus: El preprocesador que te facilita a manejar mejor tus estilosUn año más en el mundo digital: Les deseo una felices fiestas

Agregue un comentario Cancelar respuesta


Arnold Gutierrrez

Blogger y Especialista SEO peruano, me gusta ayudar creando contenidos sobre SEO, Marketing Online y Tendencias Digitales. Trabajo como apoyo en varias agencias SEO & digitales en Perú, como también realizo asesorías y campañas SEO Internacional en Colombia, México, Chile, 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.

4 years ago Tips y Novedades sobre Diseño en páginas WebStylus, Stylus funciones, Stylus mixins, stylus Variables
DICCIONARIO SEO 2020

diccionario seo 2020

Noticias en Twitter
Mis tuits
Suscríbete al blog

Dejanos tu email y obtén las últimas noticias y tendencias del marketing online y posicionamiento Web.

Únete a otros 120 suscriptores

  • Especialista SEO y Marketing Online. Apasionado a la analítica web y eCommerce.


Consejos SEO para industrias

  • Agencias de Viajes y Turismo
  • Hoteles
  • Restaurantes
  • Inmobiliarias
  • Universidades
  • Tiendas online

Partners

Conéctate

Skype: Arnoldgutierrez
Email: info@arnoldgutierrez.com
Lima, Perú

Arnold Gutierrez © 2021

Sígueme
  • Facebook
  • Twitter
  • Instagram
  • LinkedIn
  • YouTube

Sobre mí

Contacto

Footer Sidebar 2

Drop a widget on "Footer Sidebar 2" sidebar at Appearance > Widgets page.

Hablemos de SEO

Saber más

info@arnoldgutierrez.com