Presentación stylus
Descargar como PPTX, PDF1 recomendación2,695 vistas
Stylus es un preprocesador CSS que compila una sintaxis más simple y expresiva a CSS estándar. Ofrece características como nesting, mixins, herencia, importación de archivos y funciones de color para ahorrar tiempo y mejorar la organización y mantenibilidad del código CSS.
![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.](https://image.slidesharecdn.com/presentacin-stylus-130312141804-phpapp02/85/Presentacion-stylus-6-320.jpg)
Presentación stylus
- 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
- 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