Sácale todo el provecho a Stylus el mejor pre procesador de CSS

Sácale todo el provecho a Stylus el mejor pre procesador de CSS

Leonidas Esteban @LeonidasEsteban http://leonidasesteban.com/ https://github.com/LeonidasEsteban/

“Estoy aprendiendo stylus con @LeonidasESteban

en #CPCO7”

Semántica HTML y CSS

El problemamala declaración de clases

La soluciónModulos, utilidades y jerarquía semántica

SuitCSShttp://suitcss.github.io/

• u-utilityName

• ComponentName

• ComponentName--modifierName

• ComponentName-descendentName

• ComponentName.is-stateOfComponent

5 Simples convenciones

https://github.com/LeonidasEsteban/pokedex

La triste verdad de CSS• Carece de variables

• No puedo reutilizar código si no es creando otra clase

• Sintaxis repetitiva

• Es muy complicado de mantener en aplicaciones complejas

CSS needs a hero!!

http://learnboost.github.io/stylus/

Instala node.jshttp://nodejs.org/

Instala stylus (sudo) npm install stylus -g

Modulo.styl

NO más {} : ;(si los pones igual funciona pero puede que un gatito muera)

Compilastylus nombreDelArchivo.styl

stylus modulo.styl(stylus -w estilos.styl sirve para que autocompile siempre

que hagamos cambios en el archivo)

Identación(¡pero nosotros ya no codeamos así Leo!)

CSS Stylus

ampersand(&)Concatenar selectores

Variables(Las variables solo existen en el .styl)

Mixins¡Oh si a programar!

nibinstalación = (sudo) npm install -g nib

NibOlvidate de escribir mixins de prefijos

compilación = stylus -u nib -w modulo.styl

@importcrea estilos.styl

Ordena y Optimizastylus -u nib -w -c -o css/ stylus/estilos.styl

Muchas, muchas gracias :)

“Aprendí stylus con @LeonidasEsteban en

#CPCO7”

let's rock !https://github.com/LeonidasEsteban/pokedex

Triángulos en CSS

Positionsstatic, relative y absolute