Que signifie Sass lorsque Vue crée un projet ?

Le sass utilisé par vue lors de la création du projet signifie renforcer l'outil auxiliaire CSS et est une extension de CSS ; sass est un langage de prétraitement CSS écrit dans le langage buby. Il a le même style d'indentation strict que le HTML et est écrit en. css La spécification n'utilise pas d'accolades ni de points-virgules.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version Vue3, ordinateur Dell G3.

Que signifie sass lors de la création d'un projet avec vue ?

Sass (Syntacically Awesome StyleSheets) est un langage de prétraitement CSS écrit en langage buby. Il a le même style d'indentation strict que le HTML et présente de nombreuses différences avec les spécifications d'écriture CSS. . Dans et hors, les accolades et les points-virgules ne sont pas utilisés, ce n'est donc pas largement accepté.

Sass est un outil auxiliaire pour améliorer CSS. Il s'agit d'une extension de CSS. Il ajoute des variables, des règles imbriquées, des mixins, un héritage et une importation basée sur la syntaxe CSS (importations en ligne) et d'autres fonctionnalités avancées, ces extensions rendent le CSS plus. puissant et élégant. L'utilisation de Sass et des bibliothèques de styles Sass (telles que Compass) permet de mieux organiser et gérer les fichiers de style et de développer des projets plus efficacement. Le suffixe est .sass.

// deom.sass
#sidebar
　　width: 30%
　　background-color: #faa

Connaissances étendues :

vue-cli3 propose deux façons d'intégrer sass/scss

• Sélectionner le préprocesseur sass lors de la création d'un projet

• Installer manuellement sass-loader

Méthode 1 : Quand lors de la création d'un projet vue, sélectionnez le préprocesseur sass

Utilisez vue-cli3 pour créer un projet vue

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

Déplacez les touches haut et bas pour sélectionner Sélectionner manuellement les fonctionnalités, ce qui signifie sélectionner manuellement la configuration du projet créé.

Appuyez sur la touche Entrée pour passer à l'étape suivante, l'affichage est le suivant :

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Déplacez les touches haut et bas et cliquez sur la barre d'espace au niveau des pré-processeurs CSS pour le sélectionner, indiquant qu'un outil de pré-traitement CSS est requis.

Après cela, utilisez l'outil de prétraitement CSS, l'affichage est le suivant :

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

Sélectionnez Sass/SCSS (avec node-sass) comme préprocesseur CSS.

Une fois terminé, le projet installera automatiquement les dépendances sass-loader et node-sass pour nous.

Méthode 2 : Installation manuelle

Si le préprocesseur CSS n'est pas sélectionné lors de la création du projet, nous pouvons également installer manuellement sass-loader et node-sass pour intégrer scss

npm install -D sass-loader node-sass

Utiliser sass

À ce stade, nous ne faisons que besoin d'ajouter du style Spécifiez simplement lang comme scss :

<style>
$color = red;
</style>

vue service clie utilisera automatiquement le sass-loader que nous avons installé comme chargeur pour le contenu scss.

【Recommandation associée : "Tutoriel vue.js"】

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!