La sintaxis de Less, Sass y Stylus

por Natalia Ventre el 03/04/2013 ・ podés leerlo en 4 minutos ・

LESS, Sass y Stylus extienden CSS con comportamientos dinámicos (variables, mixins, operaciones y funciones).

  • Vanilla CSS es código válido de LESS, Sass y Stylus.
  • Sass tiene 2 sintaxis, la más común son los archivos con extensión .scss y la declaración de propiedades y valores es idéntica a CSS. En la sintaxis más vieja (los archivos .sass) en vez de llaves y punto y coma se usa indentación.
  • En Stylus se pueden omitir las llaves, los punto y coma y los dos puntos.

Variables

Las variables permiten definir colores, tamaños y otros valores y re-utilizarlos en la hoja de estilo.

LESS

@colorMarca: #e61b61

.foo{
	color: @colorMarca;
}

Sass

$colorMarca: #e61b61

.foo{
	color: $colorMarca;
}

Stylus

colorMarca #e61b61

.foo
	color colorMarca

Las variables también puede consistir en una lista de expressión:

font-size 2em
fontSans = font-size Arial, Helvetica, sans-serif

h2
	font fontSans

Y además se pueden referenciar valores sin necesidad de definir una variable, aunque no le encuentro aplicación práctica más allá de centrar un elemento con posición absoluta.

.foo
	height 100px
	position absolute
	left 50%
	top 50%;
	width 100px
	margin-left -(@width / 2)
	margin-top -(@height / 2)

Mixins

Los mixins permiten re-utilizar trozos de CSS y pueden aceptar parámetros. Los mixins son populares para agregar los prefijos de los vendedores.

LESS

.box-columns (@column-count: 2){
	-webkit-column-count: @column-count;
	-moz-column-count: @column-count;
	column-count: @column-count;
}

.foo{
	.box-columns(4);
}

Sass

@mixin box-columns( $column-count: 2) {
	-webkit-column-count: $column-count;
	-moz-column-count: $column-count;
	column-count: $column-count;
}

.foo{
	@include box-columns(4);
}

Además de “@include”, Sass también tiene la directiva “@extend” que compila un CSS “más eficiente.”

.error{
	border: 1px solid red;
}

.errorSerio{
	@extend .error;
	background-color: red;
	font-weight: bold;
}

compila como:

.error, .errorSerio{
	border: 1px solid red;
}

.errorSerio{
	background-color: red;
	font-weight: bold;
}

Actualización: Sass 3.2 agrega los selectores placeholder. Usando % en vez de un . no se compila, a menos que se extienda en un selector.

%decoBorde{
	border: 1px solid #eee;
	padding: 1em;
}
%decoFondo{
	background-color: DarkBlue;
	color: white;
}

.foo{
	@extend %decoBorde;
}

compila como:

.foo{
	border: 1px solid #eee;
	padding: 1em;
}

Stylus

column-count()
	-webkit-column-count arguments
	-moz-column-count arguments
	column-count arguments

.foo
	column-count 4
  • “@arguments” en LESS y “arguments” en Stylus pasa todos los parámetros.
  • En LESS y Sass los mixins pueden tener valores por defecto.
  • Los mixins en Stylus son transparentes, en el caso de los prefijos de vendedores, si en el futuro ya no se necesitan, se puede eliminar el mixin.

Operaciones y funciones

LESS, Sass y Stylus permiten sumar, restar, multiplicar y dividir valores en la propia hoja de estilo.

LESS

@column: 68px;
@gutter: 24px;

.sidebar{
	float: right;
	width: (@column * 3) + (@gutter * 2);
}

Sass

.sidebar{
	width: ($column * 3) + ($gutter * 2);
}

Stylus

.sidebar
	width (column * 3) + (gutter * 2)

Las funciones de colores son un método rápido para generar colores, sin necesidad de usar una aplicación de diseño.

LESS

a:hover{
	 color: spin(@colorEnlace, 10);
}

Sass

a:hover{
	 color: complement($colorEnlace, 10);
}

Stylus

a:hover
	 invert(colorEnlace)

Comentarios

LESS, Sass y Stylus soportan los comentarios estilo JavaScript que no aparecen el archivo CSS compilado, ideales para documentar el código.

LESS, Sass and Stylus

/* Un comentario estilo CSS va a aparecer en el archivo CSS compilado */

// Un comentario estilo JavaScript no va a aparecer en el archivo CSS compilado

Stylus

/*! Este comentario va a aparecer sí o sí sin importar las opciones de compresión */

Importar

LESS, Sass y Stylus pueden importar otras hojas de estilo1.

LESS, Sass, and Stylus

@import "mixins";

Conclusiones

LESS, Sass y Stylus son bastante similares a nivel de sintaxis. Hay otras diferencias importantes a la hora de elegir un pre-procesador de CSS para un proyecto web.


  1. Todos los archivos importados se compilan en un único archivo CSS.