Sass es un preprocesador de CSS que añade características como variables, operadores matemáticos, anidamiento y mixins para evitar la redundancia en el código CSS. Compass es un framework que extiende las funcionalidades de Sass a través de mixins para tipografía, sombras y bordes redondeados. La instalación requiere Ruby y los comandos compass create, init y watch para compilar los archivos Sass a CSS.

1. Sass y Compass

2. ¿CSS?
Cascading Style Sheets
(Hojas de Estilo en Cascada)

3. Estilo separado
de la estructura
HTML CSS

4. Estilo separado
de la estructura
Ventajas
Estilos en uno
o pocos archivos
Estándar y accesible

5. Ausencia de expresiones
de cálculo numérico
Desventajas
Redundancia de código
¿Variables?

6. ¿Que es Sass?

7. ¡Syntactically
Awesome
Stylesheets!

8. ¡Syntactically
Awesome
Stylesheets!

9. ¡Syntactically
Awesome
Stylesheets!

10. ¡Syntactically
Awesome
Stylesheets!

11. Sass
es un preprocesador de CSS

12. Copila en CSS

13. Sigue las convenciones
de CSS.

14. y añade cosas como
Variables (@variable)
Operadores (+, -, *, /, %)
Anidamiento

15. Parciales (@import)
Mixins @mixin()
Extender / Sucesiones

16. ¿Pero como funciona?

17. ¿Como se instala?

18. sudo apt-get install ruby1.9.1
Instalar Ruby

19. gem update --system
gem install compass
Instalar Compass

20. compass create <myproject>
compass init
compass watch

21. Nos vamos a un
ejemplo

22. y Compass?

23. CSS Authoring
Framework.
Compass
es un

24. Compass es una serie
de Mixins que extiende
Sass

25. Typography Vertical Rhythm
CSS3 Border Radius
Box Shadow

26. http://compass-style.org
http://sass-lang.com

27. Iván Mejía Fabela!
@koffer
koffer@gmail.com

28. compasseando.com

29. http://sassmeister.com

30. Fin de la plática