Saltear al contenido principal

Stylus: El preprocesador que te facilita a manejar mejor tus estilos

stylus preprocesador estilos css
En esta oportunidad vamos a hablar sobre un preprocesador popular para CSS, que no ayuda a facilitar el trabajo y la carga de nuestra aplicación o proyecto web.

Que es Stylus

Stylus es un preprocesador de hojas de estilos dinámico que se compila en CSS. Su diseño está influenciado por Sass y LESS. Se considera como la tercera sintaxis de preprocesador CSS más utilizado. Fue creado por TJ Holowaychuk, un ex programador de Node.js y el creador de la lengua Luna. Escrito en JADE y Node.js.
El mundo del desarrollo web front-end ha ido incrementando constantemente su aceptación de lo que llamamos “CSS Preprocessors”, que amplían la funcionalidad de CSS regulares. Posiblemente los dos más conocidos, con la mayor base de usuarios, son MENOS y Sass / SCSS. Sin embargo, hay un tercer preprocesador que no ha recibido tanta atención, y eso es Stylus.
Hoy vamos a discutir por qué Stylus es impresionante, por qué lo elijo, y por qué podría convertirse en su nuevo héroe CSS.

Porque escoger Styles?

Como he mencionado anteriormente, elijo Stylus para su:

  • Potente funcionalidad lógica
  • Capacidad para ejecutar a través de Node.js / JavaScript, (no Ruby)
  • Posibilidad de correr como parte de la configuración de Node.js que tendría de todos modos con el
  • fin de usar Grunt y Bower.
  • Limpia y mínima sintaxis pero flexible
  • Una suavidad general en la forma en que Stylus se aproxima a sus diferentes características.
  • Para mostrarte realmente por qué todo lo anterior me hace elegir Stylus, tenemos que saltar y empezar a usar un poco para que pueda mostrar exactamente lo que estoy hablando.

Empecemos con la mayor barrera de la gente con los preprocesadores CSS, cualquiera que ellos elijan, y esa es la configuración y compilación.
Una gran parte de por qué elijo Stylus es que puedo configurarlo como parte de mis métodos regulares de creación de proyectos, ya través de eso puedo usarlo con mi IDE preferido. Déjame mostraste como.
Configuración y compilación
Sí, hay algunos procesos de línea de comandos que están involucrados, sin embargo, tomarlo de alguien que nunca había utilizado la línea de comandos para una cosa antes de preprocesadores lo requiere – no es en absoluto tan difícil como usted piensa, y el uso de la línea de comando te hará sentir Diez por ciento más inteligente que antes.
Dicho esto, he reunido un paquete, que puede obtener pulsando el botón “Descargar” en la parte superior de este artículo, lo que significa que apenas tendrá que pensar en la línea de comandos si está en Windows. Unos cuantos clics y estarás en funcionamiento.
Si estás en Mac o Linux, no tengas miedo, ya que solo tendrás que ejecutar tres comandos para usar el paquete, te explicaré cómo, y son super fáciles.
Este paquete verá los archivos de Stylus de origen para los cambios, y los compilará en archivos CSS para usted. Puede utilizarlo con cualquier IDE que desee, lo cual es un gran beneficio de este enfoque en particular.
Para mí personalmente, es el Sublime Text 2. También es el IDE que recomiendo para usar con Stylus debido a la excelente Stylus sintaxis destacan paquete disponible para él, que voy a cubrir a continuación.

Paso 1: Instalar Node.js

Node.js es el pan que un desarrollador front-end debe tener en estos días. Hay tantas herramientas asombrosas que trabajan encima de él, así que instalar le conseguirá establecido no apenas para la aguja pero para el un montón de otras cosas también.
Vaya a http://nodejs.org/es/download/ y descargue el instalador para su sistema operativo.
Ejecute el instalador como lo haría con cualquier otro para colocar Node.js en su sistema.
stylus instalar node.js

Paso 2: Instalar Grunt

Grunt es una herramienta increíble para ejecutar tareas JavaScript. Puede utilizarlo para más de dos mil propósitos diferentes a través de sus complementos, enumerados aquí: http://gruntjs.com/plugins
En nuestro caso, vamos a usarlo para ver nuestros archivos Stylus y compilarlos en CSS cuando cambien.
Prepárese para su primer gusto de la línea de comando, así que abra una ventana de comando / terminal.
En Windows me parece que la forma más fácil es abrir el Explorador de Windows, luego dentro de cualquier carpeta mantenga presionada la tecla MAYÚS y haga clic con el botón derecho del ratón. En el menú contextual, verá “Abrir ventana de comandos aquí”, en la que debe hacer clic:
abrir-comando-opcional
 
Alternativamente, puede hacer clic en el botón “Inicio”, luego buscar “cmd” y pulsar ENTER para abrir la ventana de comandos.
Si estás en Linux, supongo que probablemente ya sabes cómo abrir un terminal, pero si no es aquí una guía de cómo en las distintas distribuciones: https://help.ubuntu.com/community/UsingTheTerminal
Y si estás en Mac, echa un vistazo a la introducción de un diseñador a la línea de comandos.
Ahora, escriba el comando siguiente y presione ENTER:

npm install -g grunt-cli

Aparecerá una carga de texto como esta en la ventana:
stylus instalar grunt node.js
Espere hasta que termine todo y aparezca un nuevo símbolo del sistema. Eso significa que la instalación está completa, y luego puede cerrar la ventana de comandos / terminal. Solo necesitas hacer esto una vez, ya que instalará Grunt en tu sistema con acceso global para que puedas usarlo desde cualquier carpeta de proyecto que hayas configurado.
Ahora ya está listo para configurar un proyecto real utilizando el paquete StylusCompiler que he proporcionado. Este es el proceso que usted repetirá para cada nuevo proyecto de diseño que comience.

También te puede interesar:   Stylus: Variables, mixins, condicionales y funciones

Un proyecto de la aguja

Vamos a dar este paso a paso.

Paso 1: Configurar una carpeta de proyecto

Cree una carpeta para alojar su proyecto. Para esta demostración, lo llamaremos simplemente EGProject.
Dentro de eso, cree una segunda carpeta llamada css. Esta es la carpeta en la que se escribirán sus archivos CSS.
Ahora extraiga el archivo StylusCompiler.zip en esta carpeta.
Usted debe terminar con una estructura que se parece a esto:
stylus extraer styluscompiler
 

Paso 2: Instale StylusCompiler

Vaya a la carpeta StylusCompiler y, si está en Windows, haga doble clic en el archivo denominado double_click_to_install.bat.
Si no está en Windows, abra un terminal en la carpeta StylusCompiler (o abra un terminal y luego navegue / cd a la carpeta). Escriba lo siguiente y, a continuación, presione ENTRAR:

npm install

Esto instalará el compilador dentro de su carpeta de proyecto. Una vez más verás un montón de cosas como esta en la ventana:
instalar paquete styluscompiler
Si está en Windows y hace doble clic en el archivo .bat, la ventana se cerrará una vez que la instalación se haya completado. Si no, espere hasta que el texto deje de moverse y aparezca un nuevo símbolo del sistema. Mantenga su terminal abierto para el siguiente paso.

Paso 3: Y a Ejecutar!

Ahora todo lo que necesitas hacer es iniciar la función “watch” que el proyecto te ha configurado para usar a través de Grunt. Esto verá la carpeta stylus dentro de la carpeta StylusCompiler para los cambios en cualquier archivo .styl dentro de él.
Sólo tienes que crear todos los archivos de Stylus que necesitas en esa carpeta de stylus y ya puedes ir. Nota: Todos los archivos de Stylus deben tener la extensión de archivo .styl. Cuando los cambios se guardan en los archivos de esa carpeta, el paquete compilará su código de Stylus en CSS y lo escribirá en un archivo denominado style.css en la carpeta css de su proyecto. Aún en la carpeta StylusCompiler, si está en Windows, haga doble clic en el archivo llamado watch_and_compile.bat.
Si no está en Windows, con su terminal todavía en la carpeta StylusCompiler, escriba lo siguiente y presione ENTER:

grunt watch

Deberías ver esto en la ventana de comando/terminal:
stylus ejecuntando grunt watch
Ahora, si guarda los cambios en cualquier archivo de la StylusCompiler> stylus, (siempre y cuando no haya cometido errores en su código), verá lo siguiente:
stylus copilando styluscompiler
Cuando haya terminado de trabajar con sus archivos Stylus, sólo puede cerrar la ventana de comandos / terminal, o si necesita ejecutar otro comando, puede presionar CTRL + C para detener la tarea de “ver”.

Pasos opcionales

Cambio de las opciones del proyecto
Una de las razones por las que me encanta trabajar con este tipo de configuración del proyecto es que tienes el control completo, para que puedas configurar tu proyecto como quieras y cambiarlo en cualquier momento. Si desea cambiar cosas como la carpeta de salida para su css, el nombre del archivo de salida, si el CSS está comprimido o no, y así sucesivamente, puede hacerlo en el archivo denominado Gruntfile.js en la carpeta StylusCompiler.
Estamos usando el complemento grunt-contrib-stylus para que Grunt maneje la compilación, para que pueda obtener un resumen completo de todas las configuraciones posibles para ello aquí: https://github.com/gruntjs/grunt-contrib-stylus.
Sin embargo, aquí están las opciones principales que es probable que desee.
stylus opcional grunt-contrib-stylus
Línea 20, comprimir salida CSS o no
Establezca la opción de compresión en true para CSS minified preparado para producción o en false para CSS expandido mientras esté en desarrollo.
Línea 27, establecer el nombre de archivo de salida CSS
El nombre de archivo predeterminado que se escribirá es “style.css”. Si desea que el archivo se nombre otra cosa, reemplace “style.css” con su elección en esta línea.
Línea 32, ubicación de salida CSS
De forma predeterminada, el compilador buscará un nivel desde la carpeta StylusCompiler y escribirá en la carpeta css.
Si desea que sus archivos CSS se escriban en otro lugar, cambie el valor de esta línea desde ‘../css’ a su ubicación preferida.
Trabajo con Sublime Text 2 y Stylus
Como he mencionado anteriormente, la belleza de este enfoque es que puede utilizar cualquier IDE en absoluto para editar sus archivos Stylus y se compilará de la misma manera. Sin embargo, recomiendo encarecidamente utilizar Sublime Text 2 como el paquete de destacado de sintaxis de Stylus disponible, ya que hace que trabajar con Stylus sea una delicia.
Puede descargar Sublime Text 3 aquí: http://www.sublimetext.com/.
Después de descargar e instalar, visite esta página y siga las instrucciones para instalar “Package Control”, el brillante gestor de paquetes de Sublime Text: https://sublime.wbond.net/installation#st2
Finalmente, instale el paquete de resaltado de sintaxis de Stylus. Abra el Control de paquetes accediendo a Preferencias> Control de paquetes de la siguiente manera:
sublime text 2 control paquetes
En la lista que aparece, haga clic en la opción “Instalar paquete” y espere unos segundos mientras se recupera una lista de paquetes disponibles:
sublime text instalar paquetes
Escriba “stylus” en el campo sobre la lista de paquetes para buscarlo, luego haga clic en el resultado titulado “Stylus” para instalarlo:
sublime text instalar stylus
Este paquete ahora se vuelve difícil de leer, en modo formato CSS regular como este:
stylus formato css
… en un código fácilmente diferenciado de Stylus como este:
sublime text 2 formato simple css
Sintaxis del Stylus
Una de las cosas que me encanta absolutamente de Stylus es su total flexibilidad en la sintaxis.
Con LESS, todo el código debe escribirse de la misma manera que escribiría CSS regular, es decir, debe incluir llaves, puntos y coma de la misma manera que lo haría en CSS.
Con Sass / SCSS usted tiene una opción:

  • Puede establecer una opción de compilación en su proyecto para utilizar la sintaxis de SCSS, en cuyo caso escribirá como lo haría con CSS regular.
  • Puede elegir la sintaxis de Sass, en cuyo caso puede omitir los paréntesis y los puntos y comas a favor de utilizar indentaciones de tabulación y nuevas líneas, pero no podrá utilizar la sintaxis CSS normal en el mismo archivo.
También te puede interesar:   Stylus: Variables, mixins, condicionales y funciones

Stylus por otro lado es totalmente flexible, y usted no tiene que establecer las opciones de compilación para manejar la forma en que desea escribir.

  • Usted puede escribir en la sintaxis CSS regulares con corchetes y las obras si eso es lo que se siente cómodo.
  • O bien, puede dejar tirantes rizados, dos puntos y punto y coma todos juntos. Donde las llaves rizadas serían normalmente, una indentación de la lengüeta se utiliza en lugar de otro. Cuando un punto y coma normalmente sería, se usa una nueva línea. Y donde un colon normalmente sería, un simple espacio hace el trabajo.
  • Y, no sólo se puede utilizar cualquiera de los enfoques, pero incluso se pueden combinar en el mismo archivo.

Todos estos ejemplos se compilarán en Stylus, y los enfoques de la sintaxis se pueden utilizar juntos en el mismo documento:
sublime text stylus sintaxis
Sólo Stylus te permite la omisión de todos estos elementos de sintaxis, en diferentes grados, y la combinación en marcha de estos enfoques para que puedas hacer lo que se sienta como su proyecto se mueve a lo largo.
Esta funcionalidad es increíble para el desarrollo. Te sorprenderá encontrar cuánto mayor es tu flujo cuando omites toda la sintaxis (puntuación) que puedas. Su codificación y su proceso de pensamiento a medida que avanzan se volverán mucho más suaves. Y con el resaltado de sintaxis proporcionado por el paquete que instalamos anteriormente, verá que su código será todo legible.
Pero al mismo tiempo la recopilación es muy tolerante. Si decides por una razón u otra que la sintaxis CSS regular hará que parte de tu documento esté mejor organizada, puedes seguir adelante y usarla cuando quieras. Y si accidentalmente pierde un punto y coma aquí o allá, nadie se preocupa.
 

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