Lenguaje para escribir CSS de forma rápida y eficiente.
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.
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:
Si usas Node puedes instalar la dependencia con el comando:
npm install -g sass
Para ver qué versión se ha instalado
sass --version
Para preprocesar un archivo sass a css:
sass input.sass output.css
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