Sass y Compass
¿CSS?
Cascading Style Sheets
(Hojas de Estilo en Cascada)
Estilo separado
de la estructura
HTML CSS
Estilo separado
de la estructura
Ventajas
Estilos en uno
o pocos archivos
Estándar y accesible
Ausencia de expresiones
de cálculo numérico
Desventajas
Redundancia de código
¿Variables?
¿Que es Sass?
¡Syntactically
Awesome
Stylesheets!
¡Syntactically
Awesome
Stylesheets!
¡Syntactically
Awesome
Stylesheets!
¡Syntactically
Awesome
Stylesheets!
Sass
es un preprocesador de CSS
Copila en CSS
Sigue las convenciones
de CSS.
y añade cosas como
Variables (@variable)
Operadores (+, -, *, /, %)
Anidamiento
Parciales (@import)
Mixins @mixin()
Extender / Sucesiones
¿Pero como funciona?
¿Como se instala?
sudo apt-get install ruby1.9.1
Instalar Ruby
gem update --system
gem install compass
Instalar Compass
compass create <myproject>
compass init
compass watch
Nos vamos a un
ejemplo
y Compass?
CSS Authoring
Framework.
Compass
es un
Compass es una serie
de Mixins que extiende
Sass
Typography Vertical Rhythm
CSS3 Border Radius
Box Shadow
http://compass-style.org
http://sass-lang.com
Iván Mejía Fabela!
@koffer
koffer@gmail.com
compasseando.com
http://sassmeister.com
Fin de la plática
Upcoming SlideShare
Loading in …5
×

Sass y compass

338 views
242 views

Published on

Presentación en el Flisol en Xalapa.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
338
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sass y compass

  1. 1. Sass y Compass
  2. 2. ¿CSS? Cascading Style Sheets (Hojas de Estilo en Cascada)
  3. 3. Estilo separado de la estructura HTML CSS
  4. 4. Estilo separado de la estructura Ventajas Estilos en uno o pocos archivos Estándar y accesible
  5. 5. Ausencia de expresiones de cálculo numérico Desventajas Redundancia de código ¿Variables?
  6. 6. ¿Que es Sass?
  7. 7. ¡Syntactically Awesome Stylesheets!
  8. 8. ¡Syntactically Awesome Stylesheets!
  9. 9. ¡Syntactically Awesome Stylesheets!
  10. 10. ¡Syntactically Awesome Stylesheets!
  11. 11. Sass es un preprocesador de CSS
  12. 12. Copila en CSS
  13. 13. Sigue las convenciones de CSS.
  14. 14. y añade cosas como Variables (@variable) Operadores (+, -, *, /, %) Anidamiento
  15. 15. Parciales (@import) Mixins @mixin() Extender / Sucesiones
  16. 16. ¿Pero como funciona?
  17. 17. ¿Como se instala?
  18. 18. sudo apt-get install ruby1.9.1 Instalar Ruby
  19. 19. gem update --system gem install compass Instalar Compass
  20. 20. compass create <myproject> compass init compass watch
  21. 21. Nos vamos a un ejemplo
  22. 22. y Compass?
  23. 23. CSS Authoring Framework. Compass es un
  24. 24. Compass es una serie de Mixins que extiende Sass
  25. 25. Typography Vertical Rhythm CSS3 Border Radius Box Shadow
  26. 26. http://compass-style.org http://sass-lang.com
  27. 27. Iván Mejía Fabela! @koffer koffer@gmail.com
  28. 28. compasseando.com
  29. 29. http://sassmeister.com
  30. 30. Fin de la plática

×