Sácale todo el provecho a Stylus el mejor pre procesador de CSS
-
Upload
leonidas-esteban-gonzalez -
Category
Internet
-
view
1.002 -
download
1
description
Transcript of Sácale todo el provecho a Stylus el mejor pre procesador de CSS
![Page 1: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/1.jpg)
Sácale todo el provecho a Stylus el mejor pre procesador de CSS
Leonidas Esteban @LeonidasEsteban http://leonidasesteban.com/ https://github.com/LeonidasEsteban/
![Page 2: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/2.jpg)
“Estoy aprendiendo stylus con @LeonidasESteban
en #CPCO7”
![Page 3: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/3.jpg)
Semántica HTML y CSS
![Page 4: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/4.jpg)
El problemamala declaración de clases
![Page 5: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/5.jpg)
La soluciónModulos, utilidades y jerarquía semántica
![Page 7: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/7.jpg)
• u-utilityName
• ComponentName
• ComponentName--modifierName
• ComponentName-descendentName
• ComponentName.is-stateOfComponent
5 Simples convenciones
![Page 9: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/9.jpg)
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
![Page 12: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/12.jpg)
Instala stylus (sudo) npm install stylus -g
![Page 13: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/13.jpg)
Modulo.styl
![Page 14: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/14.jpg)
NO más {} : ;(si los pones igual funciona pero puede que un gatito muera)
![Page 15: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/15.jpg)
Compilastylus nombreDelArchivo.styl
![Page 16: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/16.jpg)
stylus modulo.styl(stylus -w estilos.styl sirve para que autocompile siempre
que hagamos cambios en el archivo)
![Page 17: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/17.jpg)
Identación(¡pero nosotros ya no codeamos así Leo!)
CSS Stylus
![Page 18: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/18.jpg)
ampersand(&)Concatenar selectores
![Page 19: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/19.jpg)
Variables(Las variables solo existen en el .styl)
![Page 20: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/20.jpg)
Mixins¡Oh si a programar!
![Page 21: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/21.jpg)
nibinstalación = (sudo) npm install -g nib
![Page 22: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/22.jpg)
NibOlvidate de escribir mixins de prefijos
compilación = stylus -u nib -w modulo.styl
![Page 23: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/23.jpg)
@importcrea estilos.styl
![Page 24: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/24.jpg)
Ordena y Optimizastylus -u nib -w -c -o css/ stylus/estilos.styl
![Page 25: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/25.jpg)
Muchas, muchas gracias :)
![Page 26: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/26.jpg)
“Aprendí stylus con @LeonidasEsteban en
#CPCO7”
![Page 27: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/27.jpg)
![Page 29: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/29.jpg)
Triángulos en CSS
![Page 30: Sácale todo el provecho a Stylus el mejor pre procesador de CSS](https://reader034.fdocument.pub/reader034/viewer/2022052307/5585e12ed8b42a7c4a8b5029/html5/thumbnails/30.jpg)
Positionsstatic, relative y absolute