Sass相关-EW帮帮网

1. 配置变量

$ 表示这是一个变量，变量名以 $ 开头。

如下 variable.scss 文件，这是一个存放了很多变量样式的文件：

$background-blue:#2192fb; // 背景色
$white:#fff;
$grey: #999;
$title-grey: #666;
$title-color: #333;
$main-theme-color:#F0F6FF;
$theme-blue:#2293FC; // 主题色
$active-color: #1681e4; // hover和active色
$border: #a9c0e9;
$menu-color: #262a30;
$login-font:#32353e;
// 云机状态色
$running-color: #5ADDA1;
$closed-color: #CAD7E6;
$freeze-color: #B8D3FD;
$expired-color: #FFBE42;
$error-color: #FC5D5D;
$ing-color: #35C0FF;

$loading: #8BC6FF;

@mixin sixteenToTwentyEight($name){
  #{$name}:28px;
}
@mixin fifteenToTwentySix($name){
  #{$name}:26px;
}
@mixin fourteenToTwentyFour($name){
  #{$name}:24px;
}
@mixin twelveToTwenty($name){
  #{$name}:20px;
}
@mixin twelveToEighteen($name){
  #{$name}:18px;
}
@mixin uiToPage($name,$val){
  #{$name}: $val * 1.9px;
}

那么，如何将该文件中定义的公共样式引入到全局，让全局各个文件都能使用呢？

在 vite.config.js 里配置

export default defineConfig(({ command, mode }) => {
  // 导入环境变量
  const { VITE_APP_PUBLISH_PATH } = loadEnv(mode, process.cwd(), 'VITE_')

  return {
    base: VITE_APP_PUBLISH_PATH,
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/assets/scss/_variable.scss";`
        }
      },
      postcss: {
        plugins: [
          postcssPresetEnv(),
          postCssPxToRem({
            rootValue: 72, // 设计稿尺寸 1rem大小
            propList: ['*'] // 需要转换的属性，这里选择全部都进行转换
          })
        ]
      }
    }
  }
})

`1.1 preprocessorOptions`

preprocessorOptions 用于为 CSS 预处理器（如 Sass、Less 等）提供额外的配置选项。

SCSS

`additionalData`

在处理 SCSS 文件时，会将 additionalData 中的内容自动插入到每个 SCSS 文件的开头。

这里，@import "./src/assets/scss/_variable.scss"; 会被自动插入到每个 SCSS 文件的开头。这意味着 _variable.scss 文件中的变量可以在项目中的任何 SCSS 文件中直接使用，而无需手动导入。

`1.2 postcss`

postcss 配置项用于指定 PostCSS 插件的使用。postcss 是一个工具，可以使用插件来转换 CSS，例如自动添加浏览器前缀、转换单位等。

`plugins`

`postcssPresetEnv`

这是一个 PostCSS 插件，用于将现代 CSS 特性转换为兼容旧浏览器的代码。它会根据目标浏览器的需求自动添加浏览器前缀。

例如，如果你使用了 CSS 的 :is() 伪类或其他现代特性，postcssPresetEnv 会确保这些特性在旧浏览器中也能正常工作。

`postCssPxToRem`

这是一个 PostCSS 插件，用于将 CSS 中的 px 单位自动转换为 rem 单位。

propList：指定需要转换的 CSS 属性。['*'] 表示所有属性都会被转换为 rem 单位

rootValue：指定 1rem 的大小。在这个例子中，rootValue 被设置为 72，这意味着 1rem 等于 72px。

2. mixin 和 include

@mixin 指令定义一个样式，该样式可在整个样式表中重复使用。

@include 指令用于使用混入（mixin）定义的样式。

2.1. 使用

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

.danger {
  @include important-text;
  background-color: green;
}

// 以上sass换成css就是如下
.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

2.2. 向混入传递变量使用

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}

// 以上sass换成css就是如下
.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

Sass相关