Este documento describe cómo Assetic permite integrar Sass, Compass y Foundation para gestionar assets como CSS y JavaScript en Symfony. Assetic combina y filtra archivos de assets para producir archivos únicos minificados. Sass es una extensión de CSS que agrega características como variables y anidación. Compass es un framework CSS que utiliza Sass. Foundation es un framework responsive front-end que usa Compass y Sass.

1. Assetic
Integrar Sass + Compass + Foundation
lunes, 28 de enero de 13

2. Presentación
Rafael Matito
@m4t1t0
Prosodie
lunes, 28 de enero de 13

3. Assetic
Sistema para gestionar nuestros assets (básicamente js y css)
Desarrollado por Kris Wallsmith
Disponible desde Symfony 2.0
lunes, 28 de enero de 13

4. Manejar assets sin Assetic
lunes, 28 de enero de 13

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. Manejar assets con Assetic
lunes, 28 de enero de 13

7. SASS
Extensión de CSS3
Dispone de dos sintaxis diferentes (sass y scss)
Se traduce a código CSS
# gem install sass
lunes, 28 de enero de 13

8. SASS: Características principales
- Variables
- Anidación
- Mixins
- Funciones
- Herencia de selectores (@extend)
- Directivas de control
+ @if
+ @for
+ @each
+ @while
lunes, 28 de enero de 13

9. SASS: pasar scss a css
$ sass --watch input.scss:output.css
$ sass-convert style.sass style.scss
$ sass-convert style.scss style.sass
lunes, 28 de enero de 13

10. SASS: Ejemplo de código
lunes, 28 de enero de 13

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. SASS vs LESS
lunes, 28 de enero de 13

13. SASS vs LESS
*
* Debería ser .selector-a en lugar de .module-a
lunes, 28 de enero de 13

14. Compass
CSS Framework Open-source
Utiliza SASS
# gem install compass
lunes, 28 de enero de 13

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. Compass: ejemplo de código
lunes, 28 de enero de 13

17. Compass: otro ejemplo
lunes, 28 de enero de 13

18. Foundation
Responsive front-end CSS Framework
Utiliza Compass + SASS
# gem install zurb-foundation
lunes, 28 de enero de 13

19. Foundation: ejemplo
lunes, 28 de enero de 13

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 aprendizaje
lunes, 28 de enero de 13

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. Fichero assets.yml
lunes, 28 de enero de 13

23. Fichero assets.yml
lunes, 28 de enero de 13

24. Fichero config.yml
lunes, 28 de enero de 13

25. Fichero config_dev.yml
lunes, 28 de enero de 13

26. lunes, 28 de enero de 13

27. Less + Bootstrap
lunes, 28 de enero de 13

28. Preguntas
lunes, 28 de enero de 13