Sass: CSS con Superpoderes

CSS con superpoderes

Edgar Parada | @edgarparada

Hoy ya no soy yo…• Business Development

Manager

• Developer Evangelist

• Community Professional

• User Group - Team

• Emprendedor & Líder

• Instructor & Speaker

• Melómano y fan del Rock Nacional

Agenda del día• Plataforma Web

• Fundamentos de HTML & CSS

• Flujo de Trabajo

• Pre-procesadores CSS (Less, Sass, Stylus)

• Sass 101

• Q & A

Plataforma WebWebPlatform.org

–Molly Holzschlag (www.molly.com)

“Everyone has something to contribute to the World Wide Web. Why? Because the Web is of us…”

Fundamentos• Hyper Text Markup Language

• Tags (encabezados, párrafos, links, imágenes, etc.)

• Formato y Estructura

• Browsers

• Editores

• HTML5

Fundamentos

• Cascading Style Sheets

• Selectors (elementos, id, clases, avanzados, etc.)

• Propiedades (fondos, texto, bordes, links, etc.)

• Modelo de Caja

• CSS3

Flujo de Trabajo

Pre-procesadores (Sass)

CSS por si mismo puede ser divertido, pero las hojas de estilos cada vez se vuelven más largas, complejas y difíciles de mantener. Es aquí donde un pre-procesador puede ayudar.

Sass permite usar características que no existen en CSS y al final cuando guardas tu archivo Sass se convertirá en un archivo CSS normal.

Syntactically Awesome Stylesheets

Código SASS (Sintaxis SCSS) !!$font-stack: Helvetica, sans-serif; $primary-color: #333; !body { font: 100% $font-stack; color: $primary-color; } !

Resultado en CSS!!body { font: 100% Helvetica, sans-serif; color: #333; }

Instalación Sass

$ gem install sass

Configuración• Simple comando (Archivo / Carpeta)

$ sass --watchestilo.scss:estilo.css

$ sass --watchestilos/sass:estilos

• Aplicación de Escritorio (Scout, Codekit, Compass)

Sintaxis Original de Sass

Código SASS (Sintaxis Original) !!$font-stack: Helvetica, sans-serif $primary-color: #333 !body font: 100% $font-stack color: $primary-color !

Resultado en CSS!!body { font: 100% Helvetica, sans-serif; color: #333; }

Estilos del Código• Nested (default) - Código anidado para reflejar estructura

de HTML

$ sass --style nested

• Expanded - Formato típico de CSS, ideal para aprendizaje

• Compact - Estilo de línea para acceder más rápido a los selectores

• Compressed - Pensado para optimización en sitios con mucho tráfico

Nesting

Código SASS!!$nav { ul { margin: 0; padding: 0; list-style: none; } ! li { display: inline-block; } ! a { display: block; padding: 6px 12px; text-decoration: none; } }

Resultado en CSS!!nav ul { margin: 0; padding: 0; list-style: none; } !nav li { display: inline-block; } !nav a { display: block; padding: 6px 12px; text-decoration: none; }

Import

Código SASS!!// _reset.scss !html, body, ul, ol { margin: 0; padding: 0; } !/* base.scss */ !@import 'reset'; !body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Resultado en CSS!!html, body, ul, ol { margin: 0; padding: 0; } !body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Mixins

Código SASS!!@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } !.box { @include border-radius(10px); }

Resultado en CSS!!.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

Extend/Inheritance

Código SASS!!.message { border: 1px solid #ccc; padding: 10px; color: #333; } !.success { @extend .message; border-color: green; } !.error { @extend .message; border-color: red; } !.warning { @extend .message; border-color: yellow; }

Resultado en CSS!!.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } !.success { border-color: green; } !.error { border-color: red; } !.warning { border-color: yellow; }

Operators

Código SASS!!.container { width: 100%; } !article[role="main"] { float: left; width: 600px / 960px * 100%; } !aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }

Resultado en CSS!!.container { width: 100%; } !article[role="main"] { float: left; width: 62.5%; } !aside[role="complimentary"] { float: right; width: 31.25%; }

¿Preguntas?

CSS con superpoderes

Edgar Parada | @edgarparada