sácale todo el provecho a stylus el mejor pre procesador de css
Post on 21-Jun-2015
1.001 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
• u-utilityName
• ComponentName
• ComponentName--modifierName
• ComponentName-descendentName
• ComponentName.is-stateOfComponent
5 Simples convenciones
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
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”
Triángulos en CSS
Positionsstatic, relative y absolute
top related