Was bedeutet Sass, wenn Vue ein Projekt erstellt?

Das von Vue beim Erstellen des Projekts verwendete Sass dient der Stärkung des CSS-Hilfstools und ist eine CSS-Vorverarbeitungssprache, die in der Buby-Sprache geschrieben ist und den gleichen strengen Einrückungsstil hat css. Die Spezifikation verwendet keine geschweiften Klammern und Semikolons.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, Dell G3-Computer.

Was bedeutet Sass beim Erstellen eines Projekts mit Vue?

Sass (Syntactically Awesome StyleSheets) ist eine in Buby-Sprache geschriebene CSS-Vorverarbeitungssprache. Sie hat den gleichen strengen Einrückungsstil wie HTML und weist viele Unterschiede zu CSS-Schreibspezifikationen auf . In und out werden geschweifte Klammern und Semikolons nicht verwendet, daher ist dies nicht allgemein akzeptiert.

Sass ist ein Hilfstool zur Verbesserung von CSS. Es fügt Variablen, verschachtelte Regeln, Vererbung und Importe basierend auf der CSS-Syntax (Inline-Importe) hinzu kraftvoll und elegant. Die Verwendung von Sass und Sass-Stilbibliotheken (wie Compass) hilft dabei, Stildateien besser zu organisieren und zu verwalten und Projekte effizienter zu entwickeln. Das Suffix ist .sass.

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

Erweitertes Wissen:

vue-cli3 bietet zwei Möglichkeiten zur Integration von sass/scss

• Wählen Sie den Präprozessor sas aus, wenn Sie ein Projekt erstellen

  Methode 1: Wann Erstellen Sie ein Vue-Projekt und wählen Sie den Präprozessor Sass aus.

• Verwenden Sie vue-cli3, um ein Vue-Projekt zu erstellen.

Drücken Sie die Eingabetaste, um zum nächsten Schritt zu gelangen. Die Anzeige sieht wie folgt aus:

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

Bewegen Sie die Auf- und Ab-Tasten und klicken Sie auf die Leertaste bei CSS-Vorprozessoren, um es auszuwählen. Dies zeigt an, dass es sich um ein CSS-Vorverarbeitungstool handelt erforderlich. Danach bedienen Sie das CSS-Vorverarbeitungstool. Die Anzeige sieht wie folgt aus:

? 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

Wählen Sie Sass/SCSS (mit Node-Sass) als unseren CSS-Präprozessor.

Nach Abschluss installiert das Projekt automatisch Sass-Loader- und Node-Sass-Abhängigkeiten für uns.

Methode 2: Manuelle Installation

Wenn der CSS-Präprozessor beim Erstellen des Projekts nicht ausgewählt ist, können wir sass-loader und node-sass auch manuell installieren, um scss zu integrieren

? 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

Sass verwenden

An dieser Stelle nur Stil muss hinzugefügt werden. Geben Sie einfach lang als scss an:

npm install -D sass-loader node-sass

vue-Dienstclie verwendet automatisch den Sass-Loader, den wir als Loader für SCSS-Inhalte installiert haben. 【Verwandte Empfehlung: „

vue.js Tutorial

“】

Das obige ist der detaillierte Inhalt vonWas bedeutet Sass, wenn Vue ein Projekt erstellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!