presentación stylus
TRANSCRIPT
![Page 1: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/1.jpg)
Preprocesadores CSS: Stylus
Omar Sainz
@iOS23
![Page 2: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/2.jpg)
¿Qué es?
Un preprocesador es un tipo de
herramienta que compila una sintaxis
determinada en un lenguaje real utilizado
por otro programa (en este caso: el
navegador).
![Page 3: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/3.jpg)
¿Cómo funciona?
Código Fuente
.styl
Compilador
Consola
Lenguaje Objetivo
CSS
Mensajes de error
![Page 4: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/4.jpg)
¿Para qué sirven?
Nos solucionan las cosas, nos
ahorran trabajo, tiempo al escribir
el código de la estructura, las
hojas de estilos y las
interacciones del sitio web que
estamos creando.
![Page 5: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/5.jpg)
Stylus
• Es el héroe que necesitaba CSS.
• Es un preprocesador que maneja
una sintaxis sencilla, clara y fácil
de entender.
• Adiós a las llaves, puntos y
comas, dos puntos.
• Bienvenida indentación.
![Page 6: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/6.jpg)
DRY [DON'T REPEAT YOURSELF]
• Evitar la repetición de los
mismos fragmentos de código
X veces cuando lo puedes
hacer sólo una vez.
![Page 7: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/7.jpg)
OOCSS
• CSS orientado a objetos.
• Básicamente, significa utilizar
«objetos», generalmente instancias de
clases (que consisten en atributos y
métodos).
![Page 8: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/8.jpg)
Ventajas
• Código más entendible.
• Organización de Código.
• Mayor rapidez.
• Mantenimiento.
![Page 9: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/9.jpg)
Desventajas
• Potencial al 100%.
• Si no se tiene cuidado
puede resultar en un
código ineficiente.
• En equipos de varias
personas, o todos o nadie
![Page 10: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/10.jpg)
Objetivo Final
![Page 11: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/11.jpg)
Objetivo Final
![Page 12: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/12.jpg)
Instalación
• Comandos extras:
• Stylus --version.
• -stylus --help
![Page 13: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/13.jpg)
Compilar
• Stylus “nombre de archivo”.styl
• Por ejemplo stylus estilos.styl
![Page 14: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/14.jpg)
Stylus
Sintaxis
CSS
![Page 15: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/15.jpg)
Stylus
Variables
CSS
![Page 16: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/16.jpg)
Stylus
Nesting
CSS
Nesting sirve para
anidar nuestros
elementos y
establecer
relaciones entre
elementos.
![Page 17: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/17.jpg)
Stylus
Mixins
CSS
“Mixins: Funcionan como las clases
CSS pero se pueden reutilizar y
parametrizar de forma que pueden
simplificar bastantes tareas de
diseño”
![Page 18: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/18.jpg)
Stylus
Herencia
CSS
![Page 19: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/19.jpg)
Stylus
Import
CSS
![Page 20: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/20.jpg)
Stylus
Color Functions
![Page 21: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/21.jpg)
Stylus
Color Functions
CSS
![Page 22: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/22.jpg)
Stylus
Operaciones
CSS
![Page 23: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/23.jpg)
Documentación
• http://learnboost.github.com/stylus/
• Recomendaciones:
• http://bextlan.com/
• http://codemaxter.blogspot.mx/2012/1
2/principios-de-aprendizaje-para-
mejorar.html
![Page 24: Presentación stylus](https://reader033.vdocuments.net/reader033/viewer/2022061510/559ef86f1a28abd6768b46ba/html5/thumbnails/24.jpg)
Ejemplo