Einführung in die Installation und Verwendung des CSS-Präprozessors Sass in vue3

Sass (Syntactically Awesome Style Sheets) ist ein CSS-Präprozessor, der die Funktionalität von CSS erweitert und erweiterte Syntax und Funktionen wie Variablen, Verschachtelungs-, Misch-, Vererbungs- und Farbfunktionen bereitstellt, die bei der Entwicklung oder der Verwaltung und Pflege von Style Sheets hilfreicher sein können effizient. Die Sass-Syntax basiert auf Einrückungen (eingerückten geschweiften Klammern), die der herkömmlichen CSS-Syntax ähneln, jedoch mit einigen zusätzlichen Regeln und Syntaxkonstrukten versehen sind. Sass-Code muss in CSS-Code kompiliert werden, um im Browser gerendert zu werden.

1. Sass installieren

Bei der Verwendung von vue-cli mussten Sie in der Vergangenheit Sass-Loader, Node-Sass usw. installieren und traten bei der Installation auf verschiedene Probleme auf. Mit Vite können Sie Sass jedoch tatsächlich installieren, was sehr einfach ist.

npm install sass -D

2. Schreiben Sie globale CSS-Variablen/globale Mixins

// 全局变量 / globalVar.scss
$font-size-normal: 32px;

$bg-color: #1989fa;

// 全局mixin / globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
    -webkit-box-shadow: 0px 0px $bulr $color;
    -moz-box-shadow: 0px 0px $bulr $color;
    box-shadow: 0px 0px $bulr $color;
}

3. Einführung und Verwendung von Vite

//全局引入
css: {
    preprocessorOptions: {
      scss: {
        /**如果引入多个文件，可以使用
       * '@import "@/assets/scss/globalVariable1.scss";
       * @import"@/assets/scss/globalVariable2.scss";'
      **/
        additionalData: '@import "@/style/globalVar.scss";',
      }
    }
  },

4. Nach Bedarf einführen und verwenden

<style scoped lang="scss">
@import "@/style/globalMixin.scss";
.test{
  width: 650px;
  height: 60px;
  font-size: $font-size-normal;
  background-color: $bg-color;
  @include box-shadow;
}