Qué son Sass y Less

Si llevas el tiempo suficiente dedicándote a hacer desarrollo de páginas web, es más que probable que te hayas topado con alguno o ambos conceptos y aún no tienes claro qué son. Por eso voy a intentar explicarlo de un modo sencillo y breve sin entrar en demasiados detalles, es posible que más adelante haga un artículo específico para cada uno.

Tanto Sass como Less son preprocesadores de CSS y se utilizan para trabajar con ciertas herramientas que nos facilitan considerablemente el trabajo a la hora de crear una hoja de estilos complejas. Al desarrollar con ellos podemos traernos conceptos propios de la programación, como son las variables, al ámbito de CSS y ahorrarnos repetir código, así como facilitar el mantenimiento del mismo.

Ambos preprocesadores utilizan una sintaxis que, si bien es muy similar al CSS común, tiene algunas diferencias y será conveniente conocer las particularidades. Sin entrar en profundidad y solo para que puedas ver un ejemplo de esto que te comentaba antes, aquí tienes un fragmento de cómo podemos usar una variable y el posterior resultado una vez compilemos el script.

/**** SIN COMPILAR ****/

$colortexto: #cccccc;
 
p {
  color: $colortexto;
}

/**** COMPILADO ****/

p {
  color: #cccccc;
}

Personalmente no recomiendo su uso si estás empezando a maquetar. Es mejor que te familiarices primero con las hojas de estilos normales y aprendas a resolver los problemas de manera tradicional, ya que esto hará que seas mucho más eficiente después cuando trabajes con Sass o Less.