El SASS es la abreviatura de Syntactically Awesome Style Sheets. Es un preprocesador CSS con avances de sintaxis. Las hojas de estilo en la sintaxis avanzada son procesadas por el programa y compiladas en hojas de estilo CSS normales, que se pueden usar en el sitio web. Es una extensión de CSS que permite usar funciones como variables, anidamiento, importaciones, mixins, herencia, etc., todo en una sintaxis compatible con CSS, es decir, es compatible con todas las versiones de CSS.
Nota: consulte el enlace https://sass-lang.com/install para ver el proceso de instalación detallado de SASS.
Hay dos tipos de sintaxis disponibles para SASS:
- SCSS (Sassy CSS): los archivos que usan esta sintaxis usan la extensión .scss .
- Sintaxis con sangría (denominada simplemente «sass»): sintaxis anterior, los archivos que usan esta sintaxis usan la extensión .sass .
Nota: Este ejemplo usa la extensión .scss .
Pasos de trabajo:
- Escriba el código SCSS.
- Compile el código SCSS en código CSS usando el comando sass input.scss output.css . El primer nombre de archivo (input.scss) es el archivo scss que se compilará y el segundo nombre de archivo (output.css) es el archivo CSS procesado, que se incluirá/adjuntará en el documento Html.
- Incluya el archivo CSS compilado en el archivo Html.
Ahora vea cómo hacer un uso efectivo de las características importantes de SCSS como variables, anidamiento, mixins y operadores.
- El archivo HTML principal se llama index.html
- El archivo SCSS es styling.scss y el archivo CSS es style.css
- Comando para compilar el archivo SCSS: sass styling.scss style.css
Ejemplo: nombre de archivo index.html
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>SASS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="d1">Welcome to GeeksforGeeks. <ul> <li>Algo</li> <li>DS</li> <li>Languages</li> <li>Interviews</li> <li>CS subjects</li> </ul> </div> </body> </html>
Variables: las variables se pueden usar para almacenar valores CSS que se pueden reutilizar. Para declarar una variable en SASS, se utiliza el carácter ‘$’. Por ejemplo, $v_nombre.
$fs: 30px;
$bgcolor: #00ff40;
$pd: 100px 350px;
#dl {
font-size: $fs;
color: $bgcolor;
padding: $pd;
}
Este higo. muestra el mismo código:
Después de compilar el código CSS, guárdelo en un archivo de style.css.
#dl {
font-size: 30px;
color: #00ff40;
padding: 100px 350px;
}
Anidamiento : SASS permite que las reglas CSS se aniden entre sí, lo que sigue la misma jerarquía visual de HTML. Por ej. La propiedad CSS se puede usar para la etiqueta <li> anidada dentro de la etiqueta div.
$fs: 30px;
$bgcolor: #00ff40;
#col2: #ff0066e1;
$pd: 100px 350px;
#dl {
font-size: $fs;
color: $bgcolor;
padding: $pd;
li {
color: $col2;
}
}
Después de compilar el código CSS, guárdelo en el archivo style.css.
#dl {
font-size: 30px;
color: #00ff40;
padding: 100px 350px;
}
#dl li {
color: #ff0066e1;
}
Producción:
Mixins : Mixins ayuda a hacer reutilizable un conjunto de propiedades CSS, es decir, guarda un código y lo usa una y otra vez. Se puede incluir en otras reglas CSS usando ladirectiva @include .
Ejemplo: Este ejemplo describe el uso de @mixin & @include.
$fs: 30px;
$bgcolor: #00ff40;
#col2: #ff0066e1;
$pd: 100px 350px;
@mixin font_style() {
font-family: sans-serif;
font-size: $fs;
color: blue;
}
#dl {
@include font_style();
padding: $pd;
}
Después de compilar el código CSS se convierte en:
#dl {
font-family: sans-serif;
font-size: 30px;
color: blue;
padding: 100px 350px;
}
La salida de la página web:
Ejemplo: Los mixins también pueden tomar variables como argumentos. Los valores se pasan al incluirlos en las reglas CSS.
$fs: 30px;
#col2: #ff0066e1;
$pd: 100px 350px;
@mixin font_style() {
font-family: sans-serif;
font-size: $fs;
color: blue;
}
@mixin list_style($size, $color) {
font-size: $size;
color: $color;
}
#dl {
@include font_style();
padding: $pd;
li {
@include list_style(20px, red);
}
}
El código CSS compilado:
#dl {
font-family: sans-serif;
font-size: 30px;
color: blue;
padding: 100px 350px;
}
#dl li {
font-size: 20px;
color: red;
}
Salida final:
