viernes, 28 de septiembre de 2012

Mini-Tutorial Sass y Compass

sass-and-compass

En este pequeño artículo veremos algúnas características de Sass y Compass ¿qué son?, ¿para qué sirven?, ¿por qué debemos utilizar Sass y Compas?

Sass es un extención de CSS3 que le añade nuevas características como: variables, mixins (son como las funciones en programación pero no tienen valor de retorno), funciones, anidación, herencia de selectores y más. Y Compass es un conjunto de herramientas que apoyan al lenguaje Sass: ayuda con los prefijos, crear de manera fácil sprites, tipografías, extenciones y más.

A simple leer, tal vez a algunos no les parezca interesante y prefieran escribir CSS normal y sin complicarse la vida. Pero la curva de aprendizaje de este lenguaje y de las mayoría de las caracterísitcas es muy rápida y también nos va a ayudar mucho en nuestra productividad, al momento de diseñar. Y gracias a esto nos podemos, prácticamente, olvidar de los prefijos, nos ayuda con la compativilidad con los navegadores y muchas cosas!

¿Por qué un preprocesador para CSS?

Cualquier preprosesador para escribir CSS es mejor que escribir CSS directamente. CSS es un lenguaje de estilos no de programación, es cierto, pero esto no quiere decir que deba ser totalmente diferente a los lenguajes de programación. CSS debería incluir variables, anidacción, herencia (herencia de selectores). Por lo tanto, utilizar cualquier preprocesador de CSS como Sass, Stylus, Less es mejor que escribir CSS directamente.

¿Y las ventajas de Sass + Compass?

Ya he dicho algunas ventajas importantes, pero de todas formas haré un listado.

  • Variables

  • Mixins (son similares las funciones en programación)

  • Funciones

  • Anidación

  • Herencia de selectores

  • No más prefijos !

  • Simpliffar el uso de sprites

  • Tipografías

  • Extenciones (OMG Text, Stitch, HTML5 Boilerplate, Fancy-buttons, 960 Grid

  • CSS3 para IE6-9 (Gracias a la integración de CSS3 Pie. Gradientes, bordes redondeados, box-shadow, etc)

  • Reset (no tener que escribir los reset, completamente)

  • Integración con el framework blueprint

  • Operadores aritméricos "3px + 5px - $variable"

  • // Comentarios de una linea


Bla, bla, bla ¿y donde hay código?

Variables

Las variables en Sass se definen así:
$mi-color: blue;
$mi-borde: 1px solid red;

También se puede asignar variables a otras variables:
$mi-borde2: 1px $mi-color;

Herencia de selectores

Sí, podemos heredar los selectores y todas sus propiedades de una forma tan sencilla:
.bloque {
border: 1 px solid steelblue;
background-color: black;
border-radius: 8px;
}
// Heredamos
.bloque-principal {
@extend .bloque;
max-widht: 768px;
min-widht: 320px;
margin: 0 auto;
}

 

Mixins y funcionesnstrong>

En la programación las funciones o miembros (programación orientada a objetos) son fundamentales. Estas tienen varias características que veremos a continuación

Mixin sin parámetros.

Lenguaje SCSS:
@mixin blk {
background-color: blue;
width: 40px;
height: 40px;
}

#mi-blk1 {
@include blk;
}

Lenguaje CSS:
#mi-blk1 {
background-color: blue;
width: 40px;
height: 40px;
}

Resultado HTML:
blk1

Este último ejemplo de mixins y funciones en sass lo puedes ver funcionando en codepen.

Se quedan muchas cosas en el tintero, pero espero que te interese esto de Sass y Compass.

Recursos 

En Elementalcode estamos desarrollando un curso en video de Sass y Compass

Sass (web )

Compass (web del proyecto)

Diapositiva sobre sass y compass (en español)

Curso de Sass y Compass

Comparación entre sass y less (en inglés)

[[Este tutorial todavía no esta terminado :D]]

1 comentario:

  1. hola, solo para agradecerte este material, pensaba que css era ams facil con editores en tiempo real, pero derepente ni ellos mismos interpretan bien el codigo a como lo queremos por hacer muy grande un archivo, y con sass es facilisimo crear contenido pues practicamente no existe error de sintaxis.

    solo necesitaba ver lo maravilloso de manejar variables con Scss.

    solo me falta detallar el problema de comentarios que si aparecen y los que no aparecen, hay secciones que son exclusivas de sass que no aparecen en css etc. GRACIAS!!!

    ResponderEliminar