assetic: integrar sass, compass y foundation
DESCRIPTION
Charla en Symfony Madrid donde se explica como integrar SASS, Compass y Foundation con Symfony 2.1 mediante AsseticTRANSCRIPT
Assetic Integrar Sass + Compass + Foundation
lunes, 28 de enero de 13
Presentación
Rafael Matito
@m4t1t0
Prosodie
lunes, 28 de enero de 13
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
Manejar assets sin Assetic
lunes, 28 de enero de 13
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
Manejar assets con Assetic
lunes, 28 de enero de 13
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
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
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
SASS: Ejemplo de código
lunes, 28 de enero de 13
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
SASS vs LESS
lunes, 28 de enero de 13
SASS vs LESS
* Debería ser .selector-a en lugar de .module-a
*
lunes, 28 de enero de 13
Compass
CSS Framework Open-source
Utiliza SASS
# gem install compass
lunes, 28 de enero de 13
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
Compass: ejemplo de código
lunes, 28 de enero de 13
Compass: otro ejemplo
lunes, 28 de enero de 13
Foundation
Responsive front-end CSS Framework
Utiliza Compass + SASS
# gem install zurb-foundation
lunes, 28 de enero de 13
Foundation: ejemplo
lunes, 28 de enero de 13
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
Juntar todo con Assetic
use_controller: true
$ php app/console assetic:dump --watch
$ php app/console assetic:dump [--env=prod]
Cómo crear los js y css con assetic:
lunes, 28 de enero de 13
Fichero assets.yml
lunes, 28 de enero de 13
Fichero assets.yml
lunes, 28 de enero de 13
Fichero config.yml
lunes, 28 de enero de 13
Fichero config_dev.yml
lunes, 28 de enero de 13
lunes, 28 de enero de 13
Less + Bootstrap
lunes, 28 de enero de 13
Preguntas
lunes, 28 de enero de 13