Introducción
SASS (Syntactically Awesome Stylesheets) es un preprocesador de CSS que permite escribir hojas de estilo de manera más eficiente, estructurada y con características avanzadas que no están disponibles en CSS nativo. Es una herramienta que compila su código en CSS estándar, el cual luego puede ser interpretado por los navegadores.
Preguntas sobre el vídeo:
- ¿Qué pasos debemos seguir para instalar sass? ¿Es necesario tener node instalado?
- ¿Hay alguna diferencia entre usar la extensión
.sassy la extensión.scssen nuestros ficheros? - ¿Visual Studio Code hace un resaltado de la sintaxis de SASS automáticamente o necesitas instalar una extensión?
- ¿Se puede cargar un fichero de extensión
.scsscomo hoja de estilos de un HTML directamente?
¿Qué diferencia hay entre compilar y transpilar?
La compilación es el proceso mediante el cual el código fuente escrito en un lenguaje de alto nivel (como Java o C++) se traduce completamente a un lenguaje de bajo nivel o lenguaje máquina (código binario), el cual puede ser ejecutado directamente por el sistema operativo o la máquina.
La transpilación es un proceso en el cual el código fuente de un lenguaje de programación es transformado en otro código fuente, pero dentro del mismo nivel de abstracción.
Principales características principales de SASS
Variables
Permite definir variables para reutilizar valores como colores, tamaños, fuentes, etc.
1
2
3
4
$primary-color: #3498db;
body {
background-color: $primary-color;
}
¿CSS tiene variables?
Si. A partir de 2017, la mayoría de los navegadores modernos comenzaron a soportar variables CSS. Sin embargo, versiones antiguas de ciertos navegadores no son compatibles con esta funcionalidad, por lo que se recomienda verificar la compatibilidad antes de implementarlas en proyectos donde se necesite compatibilidad con navegadores más antiguos.
Comprueba en la web Can I use si Internet Explorer (IE) es compatible o no con las variables CSS.
Comprueba también si IE es compatible con los template literals.
¿Para qué sirve la web Can I use?
Anidación
Facilita la organización del código al permitir anidar selectores dentro de otros, reflejando la jerarquía HTML.
1
2
3
4
5
6
7
8
nav {
ul {
margin: 0;
li {
list-style: none;
}
}
}
Mixins
Permite reutilizar fragmentos de código con argumentos personalizables.
1
2
3
4
5
6
7
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
}
button {
@include border-radius(10px);
}
¿Qué es un mixin de SASS?
Un mixin en Sass es una forma de reutilizar bloques de código CSS dentro de tu hoja de estilos sin necesidad de repetir el código.
¿Puede un mixin recibir parámetros?
Los mixins pueden aceptar parámetros para hacerlos más dinámicos y reutilizables.
¿Cómo se invoca un mixin de SASS?
Con la palabra clave @include.
¿Los mixins devuelven un valor cuando se les invoca?
A diferencia de las funciones en otros lenguajes de programación, los mixins en Sass no devuelven un valor. Simplemente insertan el código CSS donde se usan.
Cómo usar SASS
Para usar SASS necesitas instalarlo y configurarlo para compilarlo a CSS. Para ello debes seguir lso siguientes pasos.
Instala node, reinicia el ordenador y comprueba que está instalado con la siguiente instrucción:
1
node -v
Crea una carpeta o usa una carpeta existente para crear un proyecto de node con la instrucción:
1
npm init -y
Instala SASS (por ejemplo, usando npm) con el parámetro -g para indicar que es global:
1
npm install -g sass
También podemos instalarlo con Chocolatey.
¿Qué es Chocolatey?
Es un gestor de paquetes para Windows.
Recuerda que un gestor de paquetes o package manager es una herramienta que facilita la instalación, actualización, configuración y gestión de software como pueden ser programas, frameworks, herramientas o librerías.
Compila tu archivo .scss en CSS:
1
sass input.scss output.css
También puedes ejecutar el siguiente comando para que se autotranspile directamente cada vez que haces cambios en el fichero .scss:
1
sass --watch input.scss output.css
¿Por qué crees que se usa el parámetro --watch para cuando queremos que se transpile automáticamente?