SASS es la abreviatura de Syntactically Awesome Style Sheets. Es un preprocesador CSS con avances de sintaxis. Las hojas de estilo en esta sintaxis son procesadas por un programa y compiladas en hojas de estilo CSS normales, que se pueden usar en el sitio web. Puede leer más sobre SCSS haciendo clic aquí . En este tutorial, discutiremos los diversos métodos para transpilar archivos .scss a archivos .css utilizando el compilador SASS.
Instalación de SASS: Comenzaremos instalando el compilador SASS usando npm.
Luego podemos instalar SASS ejecutando lo siguiente en la terminal:
npm i -g sass
Para verificar el proceso de instalación, se puede ejecutar el siguiente comando:
sass --version
Ejemplo: Crearemos un archivo HTML básico que se vincule al archivo style.css para el estilo de la página.
Código HTML:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div> <h1>Welcome to GeeksforGeeks.</h1> <br> <a href="https://www.geeksforgeeks.org/"> Visit </a> </div> </body> </html>
Código SCSS:
style.scss
$font-lg: 48px;
$font-sm: 24px;
$lightcolor: #359917;
$darkcolor: #126d12;
$pd: 18px 36px;
div {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10%;
}
h1 {
font-size: $font-lg;
}
a {
background-color: $lightcolor;
color: white;
font-size: $font-sm;
padding: $pd;
text-decoration: none;
&:hover {
background-color: $darkcolor;
}
&:active {
background-color: $darkcolor;
}
}
A continuación, compilamos el archivo SCSS usando el siguiente comando SASS.
sass input.scss:output.css
Salida: El archivo style.css se extrae del archivo scss y se usa en la página HTML.
Vigilancia automática de cambios: Supongamos que queremos cambiar el color de fondo del documento. Primero guardaremos el archivo SCSS, ejecutaremos el transpilador SASS y repetiremos todo el proceso para cada actualización. ¿No sería esto una pérdida de tiempo y energía? Aquí es donde la bandera –watch entra en escena. Esta bandera le dice al sass transpiler que ‘vigile’ el archivo dado para cualquier actualización/cambio y luego refleje automáticamente los cambios en el archivo CSS.
El siguiente comando hace que SASS mire el archivo input.scss y sigue transpilando el último código CSS del archivo.
sass --watch input.scss:output.css
Minimizar el archivo SASS: podemos usar el indicador de estilo con comprimido como argumento para eliminar cualquier espacio adicional del archivo. Esto escribe toda la hoja de estilo en una sola línea. Esto produce un archivo CSS mucho más pequeño en tamaño, lo que resulta en un tiempo de carga mejorado durante la producción.
sass input.scss:output.css --watch --style compressed
Producción:
- Observar automáticamente los cambios en los archivos junto con la minificación
- El resultado de minimizar el archivo CSS con la marca –style
Publicación traducida automáticamente
Artículo escrito por ahampriyanshu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA