Intro a Sass.Por su amigo @leivajd

Drupaleada Julio 2013

José Leivaleivajd.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; font-size: 110%;}

Cuando sabemos lo que estamos haciendo.

CSS PREPROCESSORS1

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í

Sass4

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.content-navigation border-color: $blue color: darken($blue, 9%)

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: #2d94c2; padding: 40px; margin-bottom: 80px;}

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: 1.2em;}

Nesting

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

a { text-decoration: none;}a:hover { text-decoration: underline;}

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

Mixins.

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

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

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

}

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.

Extra6

http://bit.ly/1btglof

leivajd.com/intro-sassMás en