Submit Search
Upload
Sass & Compass - DrupalCamp CR13
•
0 likes
•
612 views
Jose Leiva
Follow
Slides de la charla sobre Sass y Compass en el DrupalCamp Costa Rica 2013
Read less
Read more
Design
Report
Share
Report
Share
1 of 38
Download now
Download to read offline
Recommended
Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014
Caelum
Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 Site
Adam Stewart
Johny coba dulu
Johny coba dulu
sipali
Formato
Formato
guestad617e
Typographie et WordPress
Typographie et WordPress
Manuel Schmalstieg
CSS, planeando para el futuro
CSS, planeando para el futuro
Jose Leiva
HTML5 101 - Drupaleada jun12
HTML5 101 - Drupaleada jun12
Jose Leiva
Año Nuevo, Herramientas Nuevas
Año Nuevo, Herramientas Nuevas
Jose Leiva
Recommended
Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014
Caelum
Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 Site
Adam Stewart
Johny coba dulu
Johny coba dulu
sipali
Formato
Formato
guestad617e
Typographie et WordPress
Typographie et WordPress
Manuel Schmalstieg
CSS, planeando para el futuro
CSS, planeando para el futuro
Jose Leiva
HTML5 101 - Drupaleada jun12
HTML5 101 - Drupaleada jun12
Jose Leiva
Año Nuevo, Herramientas Nuevas
Año Nuevo, Herramientas Nuevas
Jose Leiva
Introducción a PWA
Introducción a PWA
Jose Leiva
CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016
Jose Leiva
Intro a Sass
Intro a Sass
Jose Leiva
No más curva.
No más curva.
Jose Leiva
Pruebas de usabilidad, guerrilla style
Pruebas de usabilidad, guerrilla style
Jose Leiva
Drupal - prototipos rápidos
Drupal - prototipos rápidos
Jose Leiva
Hablemos sobre Drupal vs WordPress
Hablemos sobre Drupal vs WordPress
Jose Leiva
More Related Content
More from Jose Leiva
Introducción a PWA
Introducción a PWA
Jose Leiva
CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016
Jose Leiva
Intro a Sass
Intro a Sass
Jose Leiva
No más curva.
No más curva.
Jose Leiva
Pruebas de usabilidad, guerrilla style
Pruebas de usabilidad, guerrilla style
Jose Leiva
Drupal - prototipos rápidos
Drupal - prototipos rápidos
Jose Leiva
Hablemos sobre Drupal vs WordPress
Hablemos sobre Drupal vs WordPress
Jose Leiva
More from Jose Leiva
(7)
Introducción a PWA
Introducción a PWA
CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016
Intro a Sass
Intro a Sass
No más curva.
No más curva.
Pruebas de usabilidad, guerrilla style
Pruebas de usabilidad, guerrilla style
Drupal - prototipos rápidos
Drupal - prototipos rápidos
Hablemos sobre Drupal vs WordPress
Hablemos sobre Drupal vs WordPress
Sass & Compass - DrupalCamp CR13
1.
Sass & CompassPor
su amigo @leivajd
2.
José Leiva leivajd.com /
@leivajd
3.
“Bullets, cabrón, bullets.” -JESÚS MANUEL
OLIVAS
4.
Que sí y que
no.
5.
CSS Preprocessors
6.
7.
sass-lang.com
8.
DRY Mantenible Avanzado Patrones y proporciones
9.
sass --watch input:output
10.
sass --watch scss:css
11.
Sass Syntax
12.
.sass li color: $brand
font-size: $small a color: $link .scss li { color: $brand; font-size: $small; a { color: $link; } }
13.
Nesting
14.
Sass .foo { color: #fff; .bar
{ font-size: 12px; } a { border: 0; } } Output .foo { color: #fff; } .foo .bar { font-size: 12px; } .foo a { border: 0; }
15.
Sass a { color:
#111; &:hover { color: #ccc; } } Output a { color: #111; } a:hover { color: #ccc; }
16.
Sass h1 { color:
#111; .ie-6 & { color: #ccc; } } Output h1 { color: #111; } .ie-6 h1 { color: #ccc; }
17.
No anidar más
de 3 niveles.
18.
Variables
19.
Extraer elementos repetidos: colores,
font stacks, border defini- tions, etc y volverlos piezas reutilizables.
20.
Sólo se pueden
almacnar valores, no full CSS prop- erties o full selectors.
21.
Sass $red: #e60013; $yellow: #f2e600; $border-std:
1px solid $red; .foo { color: $red; background: $yellow; border: $border-std; } Output .foo { color: #e60013; background: #f2e600; border: 1px solid #e60013; }
22.
Sass $spacing: $line-height; $half-unit: $spacing
/ 2; $double-unit: $spacing * 2; p { margin-bottom: $spacing; } Output p { margin-bottom: 24px; }
23.
Funciones
24.
Sass @function column-width($target, $context:
12) { @return ($target / $context) * 100%; } .foo { width: column-width(7); } .bar { width: column-width(7, 19);
25.
Mixins
26.
Almacenar código reutilizable &
pasar argumentos para sobreescribir.
27.
Sass @mixin left($dist) { float:
left; margin-left: $dist; } .foo { @include left(10px); } Output .foo { float: left; margin-left: 10px; }
28.
Usar Mixins cuando
CSS sigue un patrón y el output cambia cuando se incluyen nuevos valores.
29.
compass-style.org
30.
compass watch
31.
compass-style.org/reference/compass
32.
Lo cool!
33.
Sass #border-box { @include box-sizing(border-box); } Output #border-box
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
34.
Sass #border-radius { @include border-radius(25px); } Output #border-radius
{ -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px;
35.
Sass @include replace-text-with-dimensions(“image.png”); Output text-indent: -119988px; overflow:
hidden; text-align: left; background-image: url(../images/image.png); background-repeat: no-repeat; background-position: 50% 50%; width: 300px; height: 400px;
36.
breakpoint-sass.com
37.
singularity.gs
38.
leivajd.com/sass-compass Más en
Download now