¿Qué comando se usa para ejecutar el código SASS desde la línea de comando?

En este artículo, discutiremos cómo ejecutar el código SASS desde la línea de comandos. SASS (Syntactically Awesome Style Sheet) es un preprocesador CSS simple que hace posible crear hojas de estilo manejables, independientes de la plataforma y reutilizables para sitios web. Es totalmente compatible con todas las versiones de CSS. Sass reduce la repetición de CSS y por lo tanto ahorra tiempo. SASS no se ejecuta directamente con HTML. Entonces, tenemos que convertir SASS en CSS antes de usarlo en una página web y podemos hacerlo usando el paquete SASS del administrador de paquetes npm.

Configurando el SASS para compilarlo en CSS: Podemos instalar la última versión del paquete SASS desde npm usando el siguiente comando. Antes de ejecutar el siguiente comando, Node.js debe estar instalado en el sistema. Consulte el NPM (Node Package Manager) de Node.js para obtener un proceso de instalación detallado. Ahora, ejecute el siguiente comando para instalar el compilador SASS globalmente.

Sintaxis:

npm install sass -g

Nota: Ejecute el símbolo del sistema como administrador, si hay problemas en el proceso de instalación debido a un problema de permisos.

Si SASS aún no instala el uso, use el siguiente comando.

sudo npm install sass -g

Este comando instala SASS en el sistema globalmente con privilegios de superusuario.

Precompilación de SASS en CSS:

Para compilar SASS en CSS, usamos el siguiente comando en un símbolo del sistema. El comando sass nos permite precompilar nuestro archivo SASS en un archivo CSS básico. Esto nos ayuda a escribir código modular utilizando la programación SASS y seguir obteniendo todos los beneficios de CSS al compilarlo en CSS rápido tradicional.

Sintaxis:

sass <source> [destination]

Parámetros: Tiene los siguientes parámetros.

• fuente: el nombre completo del archivo SASS con la dirección del directorio de trabajo actual.
• destino: el nombre completo del archivo CSS deseado con la dirección del directorio de trabajo actual.

Ejemplo 1: si tenemos un archivo style.scss en el directorio de trabajo actual y queremos compilarlo en un archivo CSS como style.css en el mismo directorio. usamos el siguiente comando:

sass style.scss style.css

$color: green;
$font: "Times New Roman";
.container1 {
    font-family: $font;
}
.container2 {
    background-color: $color;
}

Producción:

.container1 {
    font-family: "Times New Roman";
}
.container2 {
    background-color: green;
}

Ejemplo 2: si tenemos un archivo style.scss en el otro directorio (en este caso, está en “D:\Geeksforgeeks”), en lugar del directorio actual y queremos compilarlo en un archivo CSS como estilo. css en el mismo directorio, podemos usar el siguiente comando:

sass D:\Geeksforgeeks\style.scss D:\Geeksforgeeks\style.css

$color1: blue;
$color2: red;
$font: 20px;
  
body {
    background-color: $color1;
    color: $color2;
    font-size: $font;
}

Producción:

body {
    background-color: blue;
    color: red;
    font-size: 20px;
}