Stylus, Primeros pasos

Aprendamos como escribir la sintaxis de Stylus y que debemos tener en cuenta
Parte 4 de 5

En este tutorial aprenderemos cuál es la sintaxis de Stylus, como debemos escribirla y que debemos tener en cuenta

Como editor de Texto usaré Sublime Text y la estructura de archivos es la siguiente:

Estructura Archivos

Estructura Archivos

Recuerda:

Con Stylus:

  • No necesitas escribir corchetes, ni dos puntos, ni punto y comas
  • Debes estar muy pendiente con los espaciados o tabulaciones

Empecemos:

Normalmente, escribimos CSS así:

 Pero en STYLUS sería así:

 Así sería la forma de trabajar en Stylus. Vamos  a explicar el código:

Sangría o Espaciados

Stylus nos ahorra mucho tiempo, como su sintaxis es más corta,  escribimos el código en pocas líneas.

Sin embargo, es muy importante tener presente los espaciados, porque así se mide la jerarquía dentro de stylus. Los espaciados son usados en lugar de abrir o cerrar llaves.

Para empezar, escribimos el nombre de la clase (.nombreClase), el id (#idObjeto) o la etiqueta (body), procedemos a hacer un salto de línea y hacemos un tabulado, ahora ponemos los atributos o propiedades, alineadas verticalmente con sus respectivos valores.

Jeraraquía Stylus

Jeraraquía Stylus

Hacerlo así, le indicamos a STYLUS que esta etiqueta, clase o id tendrá esos atributos, el procederá a generar los dos puntos, puntos y comas y las llaves.

Espacios entre atributo y valor

Espacios entre atributo y valor

Dar un espacio entre el atributo y el valor, stylus lo procesa poniéndole los dos puntos.

Si deseamos, podemos en nuestra sintaxis de stylus poner dos puntos y punto y coma, stylus lo procesa igual, pero la idea es evitar usar eso.

Miremos este otro caso: 

Podemos, agregar varios atributos con su valores a varias clases, etiquetas o id. Si tenemos todos estos elementos en la misma línea, los separamos por comas o si no podemos separarlos con saltos de líneas. También, podemos combinar los dos, como lo muestro a continuación:

Varias Clases

Referencia a los selectores Padres

El carácter “&” hace referencia al selector padre. Con esto podemos ahorrar tiempo si queremos agregar pseudo-selector como hover a nuestra clase.

Referencia Padre Referencia Padre

El símbolo “&” hace la función del selector padre, con eso le decimos a Stylus que debe poner el selector padre en la parte donde está el símbolo, y eso lo vemos en el resultado.

Simplificar cuando escribimos colores

Colores en Stylus Colores en Stylus

Es muy interesante lo que podemos hacer con stylus y los colores. Solo escribimos el nombre color y él lo convierte en hexadecimal.  Los colores deben ser escritos en inglés.

Observemos el background, escribimos background rgba(white,0.5), White es el color y 0.5 es el alfa, Stylus lo proceso así: background: rgba(255,255,255,0.5).

Esto nos ahorra mucho tiempo. Dejo los archivo style.styl y style.css

 Descargar Archivos

Aquí realice una breve descripción de cómo trabajar con stylus, los primeros pasos. En el próximo tutorial, hablaremos de cómo usar más a fondo la sintaxis. Aprenderemos de los condicionales, funciones, Variables entre otros.

Quinta Parte: Stylus, utilizando a fondo su sintaxis

 No olviden seguirme en twitter @juksoto y hasta la próxima.

Etiquetas:, , , , , ,

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en