Assetic: Integrar SASS, Compass y Foundation

2,473 views

Published on

Charla en Symfony Madrid donde se explica como integrar SASS, Compass y Foundation con Symfony 2.1 mediante Assetic

Published in: Technology
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,473
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
11
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Assetic: Integrar SASS, Compass y Foundation

  1. 1. Assetic Integrar Sass + Compass + Foundationlunes, 28 de enero de 13
  2. 2. Presentación Rafael Matito @m4t1t0 Prosodielunes, 28 de enero de 13
  3. 3. Assetic Sistema para gestionar nuestros assets (básicamente js y css) Desarrollado por Kris Wallsmith Disponible desde Symfony 2.0lunes, 28 de enero de 13
  4. 4. Manejar assets sin Asseticlunes, 28 de enero de 13
  5. 5. Problemas No podemos combinar varios assets en un único archivo. No podemos aplicar filtros, por ejemplo para minificar la salida. Los archivos deben estar almacenados desde donde son servidos.lunes, 28 de enero de 13
  6. 6. Manejar assets con Asseticlunes, 28 de enero de 13
  7. 7. SASS Extensión de CSS3 Dispone de dos sintaxis diferentes (sass y scss) Se traduce a código CSS # gem install sasslunes, 28 de enero de 13
  8. 8. SASS: Características principales - Variables - Anidación - Mixins - Funciones - Herencia de selectores (@extend) - Directivas de control + @if + @for + @each + @whilelunes, 28 de enero de 13
  9. 9. SASS: pasar scss a css $ sass --watch input.scss:output.css $ sass-convert style.sass style.scss $ sass-convert style.scss style.sasslunes, 28 de enero de 13
  10. 10. SASS: Ejemplo de códigolunes, 28 de enero de 13
  11. 11. SASS vs LESS SASS tiene Compass y LESS no SASS tiene directivas de control y LESS no SASS crea código CSS más eficiente SASS trabaja mejor con Media Queries http://css-tricks.com/sass-vs-less/lunes, 28 de enero de 13
  12. 12. SASS vs LESSlunes, 28 de enero de 13
  13. 13. SASS vs LESS * * Debería ser .selector-a en lugar de .module-alunes, 28 de enero de 13
  14. 14. Compass CSS Framework Open-source Utiliza SASS # gem install compasslunes, 28 de enero de 13
  15. 15. Compass: compilar $ compass compile [path/to/project] $ compass watch [path/to/project] $ compass validate [path/to/project] http://compass-style.org/lunes, 28 de enero de 13
  16. 16. Compass: ejemplo de códigolunes, 28 de enero de 13
  17. 17. Compass: otro ejemplolunes, 28 de enero de 13
  18. 18. Foundation Responsive front-end CSS Framework Utiliza Compass + SASS # gem install zurb-foundationlunes, 28 de enero de 13
  19. 19. Foundation: ejemplolunes, 28 de enero de 13
  20. 20. Foundation vs Bootstrap Bootstrap usa LESS y Foundation usa SASS + Compass Foundation es más semántico (.span1 vs .one .column) Con Bootstrap todos los proyectos se parecen a Twitter Foundation es más flexible que Bootstrap Bootstrap tiene una menor curva de aprendizajelunes, 28 de enero de 13
  21. 21. Juntar todo con Assetic Cómo crear los js y css con assetic: use_controller: true $ php app/console assetic:dump --watch $ php app/console assetic:dump [--env=prod]lunes, 28 de enero de 13
  22. 22. Fichero assets.ymllunes, 28 de enero de 13
  23. 23. Fichero assets.ymllunes, 28 de enero de 13
  24. 24. Fichero config.ymllunes, 28 de enero de 13
  25. 25. Fichero config_dev.ymllunes, 28 de enero de 13
  26. 26. lunes, 28 de enero de 13
  27. 27. Less + Bootstraplunes, 28 de enero de 13
  28. 28. Preguntaslunes, 28 de enero de 13

×