1. Preprocesadores CSS: Stylus
Omar Sainz
@iOS23

2. ¿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).

3. ¿Cómo funciona?
Código Fuente Compilador Lenguaje Objetivo
.styl Consola CSS
Mensajes de error

4. ¿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.

5. 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.

6. 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.

7. OOCSS
• CSS orientado a objetos.
• Básicamente, significa utilizar
«objetos», generalmente instancias de
clases (que consisten en atributos y
métodos).

8. Ventajas
• Código más entendible.
• Organización de Código.
• Mayor rapidez.
• Mantenimiento.

9. 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

10. Objetivo Final

11. Objetivo Final

12. Instalación
• Comandos extras:
• Stylus --version.
• -stylus --help

13. Compilar
• Stylus “nombre de archivo”.styl
• Por ejemplo stylus estilos.styl

14. Sintaxis
Stylus CSS

15. Variables
Stylus CSS

16. Nesting sirve para
anidar nuestros
elementos y
establecer
relaciones entre
Nesting elementos.
Stylus CSS

17. “Mixins: Funcionan como las clases
CSS pero se pueden reutilizar y
parametrizar de forma que pueden
Mixins simplificar bastantes tareas de
diseño”
Stylus CSS

18. Herencia
Stylus CSS

19. Import
Stylus CSS

20. Color Functions
Stylus

21. Color Functions
Stylus
CSS

22. Operaciones
Stylus CSS

23. Documentación
• http://learnboost.github.com/stylus/
• Recomendaciones:
• http://bextlan.com/
• http://codemaxter.blogspot.mx/2012/1
2/principios-de-aprendizaje-para-
mejorar.html

24. Ejemplo