sass

入门

@mixin and @include

#{} 字符串中使用变量，类似于js中的${}

.text-#{$i} {
	 font-size: $i*10;
 }

常见问题

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

如果你使用 Vite/Webpack 或其它构建工具，集成 dart-sass 处理 Sass 样式文件，可能会遇到以下警告：

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

消除 Vite 构建警告 

请添加以下配置到 Vite 中：

export default defineConfig({
  // 省略其它配置……
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern",
      },
    },
  },
});

这样 legacy JS API 的警告就消失了。

消除 Webpack 的构建警告

类似的，将参数传递给 sass-loader：

module.exports = {
  // 省略其它配置...
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              api: "modern",
              sassOptions: {
                // 你的 Sass 配置
              },
            },
          },
        ],
      },
    ],
  },
};

这样 legacy JS API 的警告就消失了。阅读更多内容，可以查看 Sass 2.0 即将到来的不兼容变化 。

vue vite sass 报错处理 Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

使用 @use 替换 @import 。

// app.scss
@use "vars/colors" as *;
 
h1 {
  color: $title-color; // <- 直接使用 var/colors.scss 中的变量
}

更多内容可以查看。

• 用 Sass 模块化系统取代全局导入，消除 1.80.0 引入的 @import 弃用警告

其他问题

• 重大更改：“@import”和全局内置 函数
• calc() : var 变量再scss中无法计算问题。
• sass-loader