Maison > Article > interface Web > 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.
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!