vue3中安装并使用CSS预处理器Sass的方法介绍

本文介绍: Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，提供了更高级的语法和特性，例如变量、嵌套、混合、继承和颜色功能等，这些特性可以帮助开发者更高效地管理和维护样式表。以前用vue-cli的时候，还要安装sass-loader、node-sass什么的，安装的时候还会遇到各种问题，但是vite其实安装sass就可以了，很简单。Sass让CSS可以使用变量。可以用更少的代码，做更多的事，用更少的时间，具有更强的可读性。Sass提供了一个!

Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，提供了更高级的语法和特性，例如变量、嵌套、混合、继承和颜色功能等，这些特性可以帮助开发者更高效地管理和维护样式表。Sass语法是基于缩进（缩进花括号）的，它与传统的CSS语法类似，但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。

Sass让编写可维护的CSSS更加简易方便。可以用更少的代码，做更多的事，用更少的时间，具有更强的可读性。

以前用vue-cli的时候，还要安装sass-loader、node-sass什么的，安装的时候还会遇到各种问题，但是vite其实安装sass就可以了，很简单。

npm install sass -D

// 全局变量 / 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;
}

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

<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;
}

Sass让CSS可以使用变量。变量类型可以是数字，字符串，颜色，null，列表和maps。在Sass中使用$符号定义变量。

$primaryColor: #eeffcc;

定义变量并不会输出任何CSS，它们只会被记录在当前作用域的变量集中。

body {
    background: $primaryColor;
}

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc;
  background: $primaryColor; //编译后#ccc
}
p {
  color: $primaryColor; //编译后#eeccff
}

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc !global;
  background: $primaryColor; //编译后#ccc
}
p {
  color: $primaryColor; //编译后#ccc
}

$fontDiff: (14px/16px);

$container-width: 100% - 20px;

$container-width: 100%;
.container {
  width: $container-width;
}
.col-4 {
  width: $container-width / 4;
}
// 编译后是这样的
//  .container {
//   width: 100%;
//  }
//
//  .col-4 {
//      width: 25%;
//  }

.container {
    width: 100%;
}
.container h1 {
    color: red;
}

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

a.myAnchor {
    color: blue;
    &:hover {
        text-decoration: underline;
    }
    &:visited {
        color: purple;
    }
}

@import "grids.scss";

@import "grids";

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

文章目录

Sass是什么？

为什么使用Sass?

安装sass

1、安装sass

2、编写全局css变量/全局mixin

3、vite引入并使用

4、按需引入并使用

sass语法

1、变量

创建一个变量

使用变量

变量作用域

2、数学计算

两个Sass有关于数学计算的“陷阱”

3、嵌套

4、Imports

sass中文官网

发表回复取消回复