SASS o Syntactically Awesome Style Sheet es una actualización sobre CSS estándar y proporciona características muy necesarias que faltan en CSS como variables, operadores, reglas at, anidamiento, mixins, herencia y mucho más. Los archivos SASS se utilizan con la extensión .scss. Desafortunadamente, incluso los navegadores modernos como Chrome y Firebox no pueden entender la sintaxis SASS, por lo que usamos transpiladores como dart-sass para transpilar o compilar archivos .scss a .css. Puede leer más sobre SCSS haciendo clic aquí. Dart Sassis es la implementación principal de Sass que reemplaza al Ruby SaaS heredado. Es rápido, fácil de instalar y se compila en JavaScript puro. Analicemos las formas más comunes de instalar dart-sass en cualquier distribución de Linux. También veremos cómo usar sass para convertir un archivo SCSS en un archivo CSS.
Instalación en Dart Sass en Linux
Desde el código fuente
Paso 1: Descargue la última versión de Dart Sass haciendo clic aquí .
Paso 2: extraiga el archivo tar a /opt.
$sudo tar -xvzf ~/Descargas/dart-sass-1.52.1-linux-x64.tar.gz -C /opt/
Paso 3: Agregue export PATH=”/opt/dart-sass:$PATH” a la última línea de .bashrc/.zshrc.
$echo ‘exportar RUTA=”/opt/dart-sass:$RUTA”’ >> ~/.zshrc
Paso 4: guarde los cambios en .bashrc/.zshrc ejecutando
$fuente ~/.zshrc
Paso 5: Verificar la instalación
$sass –versión
de MNP
Paso 1: Instale SASS globalmente ejecutando el siguiente comando:
$npm i-g descaro
Paso 2: Verifique el proceso de instalación ejecutando: sass –version
$sass –versión
Uso
Crearemos un archivo HTML básico y .SCSS para diseñar. Luego usaremos dart-sass para convertir nuestro archivo scss en un archivo .css, que un navegador pueda entender
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>
CSS
$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;
}
}
Luego, compila el archivo SCSS usando dart-sass.
$sass entrada.scss:salida.css
El archivo style.css se extrae del archivo scss y se utiliza en la página HTML.
Publicación traducida automáticamente
Artículo escrito por ahampriyanshu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA