Intro a Sass - Drupaleada Julio 2013

1. Intro a Sass.Por su amigo @leivajd
Drupaleada Julio 2013

2. José Leiva
leivajd.com / @leivajd

3. CSS es fácil, ¿verdad?

4. .lista-homepage .views-row .views-field-field-dura-
cion .views-label {
float: left;
margin-right: 5px;
}

5. #header #navigation {
float: left;
}
#page .menu {
float: left;
}
#main .menu {
float: right!important;
}

6. #main #sidebar-first {
float: left;
position: absolute;
margin-top: 20px;
top: 20px;
}

7. h1, h2, h3, h4, h5 {
font-family: Arial,sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 1.2em;
font-size: 110%;
}

9. Cuando sabemos lo que
estamos haciendo.

10. CSS PREPROCESSORS
1

12. titulo blanco

14. http://bit.ly/15PI926

15. http://bit.ly/13Rhowe

16. ¿Porqué usarlos?
2

17. Como no es CSS, no estamos atados a
las limitantes de CSS.

18. Como no es CSS, no estamos atados a
las limitantes de CSS.
Nesting, Variables, Mixins y Functions.

19. Flujo de trabajo rápido y eficiente.

20. Flujo de trabajo rápido y eficiente.
DRI code, Variables / Mixins.

21. ¿Funcionan con
Drupal?
3

22. Sí

23. Sass
4

25. Sass = Syntactically Awesome Stylesheets

26. http://bit.ly/18nqMpC

27. http://bit.ly/13CnQ2N

28. Sintaxis.

29. 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%)

30. sass --watch input:output

31. sass --watch scss:css
Folders

32. sass --watch style.scss:style.css
Archivos

33. Variables.

34. Variables
$variableName: Value;
• Colores.
• Font (size, family)
• Medidas

35. Variables

36. Variables
#hero-nav {
background: $lightblue;
padding: $padding;
margin-bottom: $padding*2;
}
#hero-nav {
background: #2d94c2;
padding: 40px;
margin-bottom: 80px;
}

37. Nesting.

38. Nesting
.module
.module ul {}
.module li {}
.module a {}

39. Nesting
.module {
ul {
}
li {
}
a {
}
}

40. Nesting
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}

41. Nesting
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

42. 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; }
}

43. Mixins.

44. 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;
}

45. 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);
}
}

46. 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;
}
}

47. Cuidado!
5

48. Hay que tener en cuenta:

49. Hay que tener en cuenta:
• Usar el mismo preprocesador.

50. Hay que tener en cuenta:
• Usar el mismo preprocesador.
• Trabajar local.

51. Hay que tener en cuenta:
• Usar el mismo preprocesador.
• Trabajar local.
• Planificar.

52. Hay que tener en cuenta:
• Usar el mismo preprocesador.
• Trabajar local.
• Planificar.
• Cuidar el output, pero no tanto.

53. Extra
6

54. http://bit.ly/1btglof

58. leivajd.com/intro-sass
Más en