Presentación   stylus
Upcoming SlideShare
Loading in...5
×
 

Presentación stylus

on

  • 966 views

 

Statistics

Views

Total Views
966
Views on SlideShare
829
Embed Views
137

Actions

Likes
1
Downloads
16
Comments
0

2 Embeds 137

http://omarsainz.github.io 136
https://omarsainz.github.io 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Presentación   stylus Presentación stylus Presentation Transcript

  • Preprocesadores CSS: Stylus Omar Sainz @iOS23
  • ¿Qué es?Un preprocesador es un tipo deherramienta que compila una sintaxisdeterminada en un lenguaje real utilizadopor otro programa (en este caso: elnavegador).
  • ¿Cómo funciona?Código Fuente Compilador Lenguaje Objetivo .styl Consola CSS Mensajes de error
  • ¿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.
  • 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.
  • 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.
  • OOCSS• CSS orientado a objetos.• Básicamente, significa utilizar «objetos», generalmente instancias de clases (que consisten en atributos y métodos).
  • Ventajas • Código más entendible. • Organización de Código. • Mayor rapidez. • Mantenimiento.
  • 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
  • Objetivo Final
  • Objetivo Final
  • Instalación• Comandos extras: • Stylus --version. • -stylus --help
  • Compilar • Stylus “nombre de archivo”.styl • Por ejemplo stylus estilos.styl
  • SintaxisStylus CSS
  • VariablesStylus CSS
  • Nesting sirve para anidar nuestros elementos y establecer relaciones entreNesting elementos. Stylus CSS
  • “Mixins: Funcionan como las clases CSS pero se pueden reutilizar y parametrizar de forma que puedenMixins simplificar bastantes tareas de diseño” Stylus CSS
  • Herencia Stylus CSS
  • Import Stylus CSS
  • Color Functions Stylus
  • Color FunctionsStylusCSS
  • OperacionesStylus CSS
  • Documentación• http://learnboost.github.com/stylus/• Recomendaciones: • http://bextlan.com/ • http://codemaxter.blogspot.mx/2012/1 2/principios-de-aprendizaje-para- mejorar.html
  • Ejemplo