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.
Assetic Integrar Sass + Compass + Foundation con menos de
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
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
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
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
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