SASS

Lenguaje para escribir CSS de forma rápida y eficiente.

sass

SASS es el acrónimo de Syntactically Awesome Stylesheets. Es una extensión de CSS 3 que permite añadir variables, reglas anidadas y otras cualidades para escribir CSS de forma óptima.

Para diseñar proyectos de gran tamaño y que sean mantenibles se hace complicado usar sólo CSS. Uno de los ejemplos más claros es en el uso de la paleta de colores. En el diseño de nuestra web normalmente usaremos los mismos colores en varios sitios, con CSS normal se escribe la referencia hexadecimal o el nombre de color en cada sitio donde se usa. Esto puede generar problemas, por ejemplo si hay varios diseñadores o programadores modificando los estilos es fácil que alguien se equivoque y escriba o use otro color. Con SASS se pueden definir variables de manera que se definirán en un sólo sitio y en el resto del código se harán referencias a estas variables. En el caso de querer cambiar los colores también será mucho más sencillo y no traerá errores.

Características de SASS

SASS ofrece una variedad de características potentes que pueden facilitar y hacer más eficiente tu desarrollo en CSS. Aquí tienes algunas de las características clave:

  • Variables: SASS te permite definir variables que pueden reutilizarse en todo tu código. Esto ahorra tiempo y esfuerzo al escribir y actualizar tu código.
  • Funciones: SASS te permite definir funciones personalizadas que pueden usarse para manipular valores, realizar cálculos y más. Estas funciones hacen que tu código sea más flexible y reutilizable.
  • Anidación (Nesting): SASS te permite anidar selectores CSS unos dentro de otros, haciendo que tu código sea más organizado y fácil de leer.
  • Herencia: SASS admite la herencia, lo que te permite definir estilos que se aplican a múltiples selectores o clases. Esto puede ahorrarte tiempo y esfuerzo al escribir y actualizar tu código.
  • Mixins: SASS permite definir fragmentos de código reutilizables que pueden usarse en toda tu base de código. Esto ayuda a mantener la consistencia y reducir la redundancia en tu código.
  • Parciales (Partials): SASS admite parciales, lo que te permite dividir tu base de código en varios archivos e importarlos entre sí. Esto te ayuda a organizar tu código y hacerlo más fácil de mantener.

Instalar SASS

Si usas Node puedes instalar la dependencia con el comando:

Terminal
npm install -g sass

Para ver qué versión se ha instalado

Terminal
sass --version

Para preprocesar un archivo sass a css:

Terminal
sass input.sass output.css

Ejemplo de sintáxis SASS

SASS tiene una sintaxis específica,

/* SASS */
$font-family: Helvetica, sans-serif
$primary-color: #000
body
font: 100% $font-family
color: $primary-color

Para más información sobre la sintaxis de SASS podéis ver su página oficial