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