Intro a Sass.Por su amigo @leivajd
Drupaleada Julio 2013
José Leiva
leivajd.com / @leivajd
CSS es fácil, ¿verdad?
.lista-homepage .views-row .views-field-field-dura-
cion .views-label {
	 float: left;
	 margin-right: 5px;
}
#header #navigation {
	 float: left;
}
#page .menu {
	 float: left;
}
#main .menu {
	 float: right!important;
}
#main #sidebar-first {
	 float: left;
	 position: absolute;
	 margin-top: 20px;
	 top: 20px;
}
h1, h2, h3, h4, h5 {
	 font-family: Arial,sans-serif;
	 font-size: 12px;
	 font-weight: normal;
	 line-height: 1.2em;
	 fo...
Cuando sabemos lo que
estamos haciendo.
CSS PREPROCESSORS
1
titulo blanco
http://bit.ly/15PI926
http://bit.ly/13Rhowe
¿Porqué usarlos?
2
Como no es CSS, no estamos atados a
las limitantes de CSS.
Como no es CSS, no estamos atados a
las limitantes de CSS.
Nesting, Variables, Mixins y Functions.
Flujo de trabajo rápido y eficiente.
Flujo de trabajo rápido y eficiente.
DRI code, Variables / Mixins.
¿Funcionan con
Drupal?
3
Sí
Sass
4
Sass = Syntactically Awesome Stylesheets
http://bit.ly/18nqMpC
http://bit.ly/13CnQ2N
Sintaxis.
Dos formatos:
• Sassy CSS / .scss
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
• Indented syntax...
sass --watch input:output
sass --watch scss:css
Folders
sass --watch style.scss:style.css
Archivos
Variables.
Variables
$variableName: Value;
• Colores.
• Font (size, family)
• Medidas
Variables
Variables
#hero-nav {
background: $lightblue;
padding: $padding;
margin-bottom: $padding*2;
}
#hero-nav {
background: #2d9...
Nesting.
Nesting
.module
.module ul {}
.module li {}
.module a {}
Nesting
.module {
	 ul {
	
	}
	 li {
	
	}
	 a {
	
	}
}
Nesting
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
li {
font-family: serif;
font-weight: bold;
font-size: ...
Nesting
a {
	 text-decoration: none;
	 &:hover {
		 text-decoration: underline;
	}
}
a {
	 text-decoration: none;
}
a:hove...
Nesting
.aftercontent {
overflow: hidden;
width: flex-grid(6);
padding-top: $double-spacing-unit;
@media screen and (min-w...
Mixins.
Mixins
Nos permite reutilizar porciones de código,
se pueden “pasar” argumentos.
@mixin vendor($property, $value...){
-web...
Mixins
@mixin font-size($font-size, $line-height:true {
font-size:$font-size;
font-size:($font-size / $base-font-size)*1em...
Mixins
h2 {
font-size: 20px;
font-size: 1.25em;
line-height: 1;
}
@media screen and (min-width: 880px) {
	 h2 {
		 font-si...
Cuidado!
5
Hay que tener en cuenta:
Hay que tener en cuenta:
• Usar el mismo preprocesador.
Hay que tener en cuenta:
• Usar el mismo preprocesador.
• Trabajar local.
Hay que tener en cuenta:
• Usar el mismo preprocesador.
• Trabajar local.
• Planificar.
Hay que tener en cuenta:
• Usar el mismo preprocesador.
• Trabajar local.
• Planificar.
• Cuidar el output, pero no tanto.
Extra
6
http://bit.ly/1btglof
leivajd.com/intro-sass
Más en
Intro a Sass
Intro a Sass
Intro a Sass
Intro a Sass
Intro a Sass
Intro a Sass
Intro a Sass
Upcoming SlideShare
Loading in …5
×

Intro a Sass

655 views

Published on

Intro a Sass - Drupaleada Julio 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
655
On SlideShare
0
From Embeds
0
Number of Embeds
105
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro a Sass

  1. 1. Intro a Sass.Por su amigo @leivajd Drupaleada Julio 2013
  2. 2. José Leiva leivajd.com / @leivajd
  3. 3. CSS es fácil, ¿verdad?
  4. 4. .lista-homepage .views-row .views-field-field-dura- cion .views-label { float: left; margin-right: 5px; }
  5. 5. #header #navigation { float: left; } #page .menu { float: left; } #main .menu { float: right!important; }
  6. 6. #main #sidebar-first { float: left; position: absolute; margin-top: 20px; top: 20px; }
  7. 7. h1, h2, h3, h4, h5 { font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 1.2em; font-size: 110%; }
  8. 8. Cuando sabemos lo que estamos haciendo.
  9. 9. CSS PREPROCESSORS 1
  10. 10. titulo blanco
  11. 11. http://bit.ly/15PI926
  12. 12. http://bit.ly/13Rhowe
  13. 13. ¿Porqué usarlos? 2
  14. 14. Como no es CSS, no estamos atados a las limitantes de CSS.
  15. 15. Como no es CSS, no estamos atados a las limitantes de CSS. Nesting, Variables, Mixins y Functions.
  16. 16. Flujo de trabajo rápido y eficiente.
  17. 17. Flujo de trabajo rápido y eficiente. DRI code, Variables / Mixins.
  18. 18. ¿Funcionan con Drupal? 3
  19. 19.
  20. 20. Sass 4
  21. 21. Sass = Syntactically Awesome Stylesheets
  22. 22. http://bit.ly/18nqMpC
  23. 23. http://bit.ly/13CnQ2N
  24. 24. Sintaxis.
  25. 25. Dos formatos: • Sassy CSS / .scss .content-navigation { border-color: $blue; color: darken($blue, 9%); } • Indented syntax / .sass .content-navigation border-color: $blue color: darken($blue, 9%)
  26. 26. sass --watch input:output
  27. 27. sass --watch scss:css Folders
  28. 28. sass --watch style.scss:style.css Archivos
  29. 29. Variables.
  30. 30. Variables $variableName: Value; • Colores. • Font (size, family) • Medidas
  31. 31. Variables
  32. 32. Variables #hero-nav { background: $lightblue; padding: $padding; margin-bottom: $padding*2; } #hero-nav { background: #2d94c2; padding: 40px; margin-bottom: 80px; }
  33. 33. Nesting.
  34. 34. Nesting .module .module ul {} .module li {} .module a {}
  35. 35. Nesting .module { ul { } li { } a { } }
  36. 36. Nesting li { font: { family: serif; weight: bold; size: 1.2em; } } li { font-family: serif; font-weight: bold; font-size: 1.2em; }
  37. 37. Nesting a { text-decoration: none; &:hover { text-decoration: underline; } } a { text-decoration: none; } a:hover { text-decoration: underline; }
  38. 38. Nesting .aftercontent { overflow: hidden; width: flex-grid(6); padding-top: $double-spacing-unit; @media screen and (min-width: $break-five) { padding-top: $double-spacing-unit * 2; } } .aftercontent { overflow: hidden; width: 100%; padding-top: 40px; } @media screen and (min-width: 940px) { .aftercontent { padding-top: 80px; } }
  39. 39. Mixins.
  40. 40. Mixins Nos permite reutilizar porciones de código, se pueden “pasar” argumentos. @mixin vendor($property, $value...){ -webkit-#{$property}:$value; -moz-#{$property}:$value; -ms-#{$property}:$value; -o-#{$property}:$value; #{$property}:$value; }
  41. 41. Mixins @mixin font-size($font-size, $line-height:true { font-size:$font-size; font-size:($font-size / $base-font-size)*1em; @if $line-height == true{ line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size); } } h2 { @include font-size($h2-size); @media screen and (min-width: $break-four) { @include font-size(24px); } }
  42. 42. Mixins h2 { font-size: 20px; font-size: 1.25em; line-height: 1; } @media screen and (min-width: 880px) { h2 { font-size: 24px; font-size: 1.5em; line-height: 1.66667; } }
  43. 43. Cuidado! 5
  44. 44. Hay que tener en cuenta:
  45. 45. Hay que tener en cuenta: • Usar el mismo preprocesador.
  46. 46. Hay que tener en cuenta: • Usar el mismo preprocesador. • Trabajar local.
  47. 47. Hay que tener en cuenta: • Usar el mismo preprocesador. • Trabajar local. • Planificar.
  48. 48. Hay que tener en cuenta: • Usar el mismo preprocesador. • Trabajar local. • Planificar. • Cuidar el output, pero no tanto.
  49. 49. Extra 6
  50. 50. http://bit.ly/1btglof
  51. 51. leivajd.com/intro-sass Más en

×