Assetic: Integrar SASS, Compass y Foundation

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

description

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

Transcript of Assetic: Integrar SASS, Compass y Foundation

Page 1: Assetic: Integrar SASS, Compass y Foundation

Assetic Integrar Sass + Compass + Foundation

lunes, 28 de enero de 13

Page 2: Assetic: Integrar SASS, Compass y Foundation

Presentación

Rafael Matito

@m4t1t0

Prosodie

lunes, 28 de enero de 13

Page 3: Assetic: Integrar SASS, Compass y Foundation

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

Page 4: Assetic: Integrar SASS, Compass y Foundation

Manejar assets sin Assetic

lunes, 28 de enero de 13

Page 5: Assetic: Integrar SASS, Compass y Foundation

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

Page 6: Assetic: Integrar SASS, Compass y Foundation

Manejar assets con Assetic

lunes, 28 de enero de 13

Page 7: Assetic: Integrar SASS, Compass y Foundation

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

Page 8: Assetic: Integrar SASS, Compass y Foundation

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

Page 9: Assetic: Integrar SASS, Compass y Foundation

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

Page 10: Assetic: Integrar SASS, Compass y Foundation

SASS: Ejemplo de código

lunes, 28 de enero de 13

Page 11: Assetic: Integrar SASS, Compass y Foundation

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

Page 12: Assetic: Integrar SASS, Compass y Foundation

SASS vs LESS

lunes, 28 de enero de 13

Page 13: Assetic: Integrar SASS, Compass y Foundation

SASS vs LESS

* Debería ser .selector-a en lugar de .module-a

*

lunes, 28 de enero de 13

Page 14: Assetic: Integrar SASS, Compass y Foundation

Compass

CSS Framework Open-source

Utiliza SASS

# gem install compass

lunes, 28 de enero de 13

Page 15: Assetic: Integrar SASS, Compass y Foundation

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

Page 16: Assetic: Integrar SASS, Compass y Foundation

Compass: ejemplo de código

lunes, 28 de enero de 13

Page 17: Assetic: Integrar SASS, Compass y Foundation

Compass: otro ejemplo

lunes, 28 de enero de 13

Page 18: Assetic: Integrar SASS, Compass y Foundation

Foundation

Responsive front-end CSS Framework

Utiliza Compass + SASS

# gem install zurb-foundation

lunes, 28 de enero de 13

Page 19: Assetic: Integrar SASS, Compass y Foundation

Foundation: ejemplo

lunes, 28 de enero de 13

Page 20: Assetic: Integrar SASS, Compass y Foundation

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

Page 21: Assetic: Integrar SASS, Compass y Foundation

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

Page 22: Assetic: Integrar SASS, Compass y Foundation

Fichero assets.yml

lunes, 28 de enero de 13

Page 23: Assetic: Integrar SASS, Compass y Foundation

Fichero assets.yml

lunes, 28 de enero de 13

Page 24: Assetic: Integrar SASS, Compass y Foundation

Fichero config.yml

lunes, 28 de enero de 13

Page 25: Assetic: Integrar SASS, Compass y Foundation

Fichero config_dev.yml

lunes, 28 de enero de 13

Page 26: Assetic: Integrar SASS, Compass y Foundation

lunes, 28 de enero de 13

Page 27: Assetic: Integrar SASS, Compass y Foundation

Less + Bootstrap

lunes, 28 de enero de 13

Page 28: Assetic: Integrar SASS, Compass y Foundation

Preguntas

lunes, 28 de enero de 13