Maison > interface Web > tutoriel CSS > le corps du texte

Quelle commande est utilisée pour exécuter le code SASS à partir de la ligne de commande ?

WBOY
Libérer: 2023-09-05 21:05:01
avant
616 Les gens l'ont consulté

SASS est l'abréviation de Syntropically Awesome Style Sheets. C'est un préprocesseur qui compile le code SCSS et le convertit en CSS (Cascading Style Sheets). C'est un surensemble de CSS.

Ce tutoriel nous apprendra à compiler du code SCSS à l'aide du terminal.

Étapes pour exécuter SASS à partir du terminal

Les utilisateurs doivent suivre les étapes ci-dessous pour exécuter le code SASS à partir du terminal.

  • Étape 1 - L'utilisateur doit installer Node.JS sur sa machine locale. Sinon, veuillez visiter https://nodejs.org/en/download, téléchargez-le et installez-le à partir de là.

  • Étape 2 - Maintenant, nous devons créer un projet Node. Ouvrez un terminal dans le répertoire du projet et exécutez la commande suivante dans le terminal pour démarrer un nouveau projet NodeJS.

npm init -y
Copier après la connexion
  • Étape 3 - Exécutez maintenant la commande suivante dans le terminal pour installer SASS dans le projet de nœud actuel.

npm i node-sass
Copier après la connexion
  • Étape 4 - Ouvrez le fichier package.json du projet en cours et ajoutez les lignes suivantes dans l'objet « scripts ».

"scss": "node-sass --watch scss -o css"
Copier après la connexion

哪个命令用于从命令行运行 SASS 代码?

  • Étape 5 - Créez des dossiers SCSS et CSS dans le répertoire du projet. Ajoutez également le fichier style.scss dans le répertoire SCSS et le fichier style.css dans le répertoire CSS.

Il s'agit de la structure du répertoire du projet.

哪个命令用于从命令行运行 SASS 代码?

  • Étape 6 - Ajoutez maintenant le code SASS suivant dans le fichier style.scss.

$height: 45rem;
$border: 2px, solid, blue;

div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}
Copier après la connexion
  • Étape 7 - Maintenant, exécutez la commande suivante dans le terminal pour compiler le code SCSS.

npm run scss
Copier après la connexion

哪个命令用于从命令行运行 SASS 代码?

  • Étape 8 - Il générera le code de sortie suivant dans le fichier style.css. Sinon, modifiez le code du fichier scss pendant l'exécution du script.

div {
   height: 45rem;
   border: 2px, solid, blue;
   border-radius: 1rem;
}
Copier après la connexion

Désormais, chaque fois que l'utilisateur apporte des modifications au fichier style.scss, la sortie dans le fichier style.css change également.

Pourquoi utilisons-nous SASS au lieu de CSS ?

L'utilisation de SASS par rapport à CSS présente de nombreux avantages.

  • Variables - Sass nous permet de créer des variables, ce qui peut simplifier le code CSS et réduire la complexité. Par exemple, nous pouvons définir une variable backgroundColor et lui attribuer la valeur appropriée. Après cela, nous pouvons utiliser des variables dans tout le code au lieu de valeurs de couleur codées en dur.

  • Mixins - Sass nous permet de définir des mixins, qui sont des morceaux de code réutilisables, tout comme les fonctions que nous pouvons utiliser dans d'autres parties de notre code.

  • Nesting - Sass nous permet d'imbriquer les sélecteurs CSS ensemble, rendant notre code plus organisé et plus facile à lire. Par exemple, nous pouvons imbriquer un sélecteur ul dans un sélecteur de navigation pour styliser un menu de navigation.

  • Importer- Nous pouvons créer des fichiers SCSS partiels dans SASS et les importer dans d'autres fichiers SCSS, en divisant le code des différents composants dans des fichiers séparés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal