Presentación stylus

1,727 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,727
On SlideShare
0
From Embeds
0
Number of Embeds
625
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Presentación stylus

  1. 1. Preprocesadores CSS: Stylus Omar Sainz @iOS23
  2. 2. ¿Qué es?Un preprocesador es un tipo deherramienta que compila una sintaxisdeterminada en un lenguaje real utilizadopor otro programa (en este caso: elnavegador).
  3. 3. ¿Cómo funciona?Código Fuente Compilador Lenguaje Objetivo .styl Consola CSS Mensajes de error
  4. 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. 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. 6. DRY [DONT REPEAT YOURSELF] • Evitar la repetición de los mismos fragmentos de código X veces cuando lo puedes hacer sólo una vez.
  7. 7. OOCSS• CSS orientado a objetos.• Básicamente, significa utilizar «objetos», generalmente instancias de clases (que consisten en atributos y métodos).
  8. 8. Ventajas • Código más entendible. • Organización de Código. • Mayor rapidez. • Mantenimiento.
  9. 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. 10. Objetivo Final
  11. 11. Objetivo Final
  12. 12. Instalación• Comandos extras: • Stylus --version. • -stylus --help
  13. 13. Compilar • Stylus “nombre de archivo”.styl • Por ejemplo stylus estilos.styl
  14. 14. SintaxisStylus CSS
  15. 15. VariablesStylus CSS
  16. 16. Nesting sirve para anidar nuestros elementos y establecer relaciones entreNesting elementos. Stylus CSS
  17. 17. “Mixins: Funcionan como las clases CSS pero se pueden reutilizar y parametrizar de forma que puedenMixins simplificar bastantes tareas de diseño” Stylus CSS
  18. 18. Herencia Stylus CSS
  19. 19. Import Stylus CSS
  20. 20. Color Functions Stylus
  21. 21. Color FunctionsStylusCSS
  22. 22. OperacionesStylus CSS
  23. 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. 24. Ejemplo

×