scss问题与解决方案合集

vite中将自定义的mixin和function配置为全局可用

vite.config.ts

{
css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use '@/assets/scss/_functions.scss' as *;
@use '@/assets/scss/_mixins.scss' as *;`,
        },
      },
    }
}

P.S. 'as *' 是必须的，否则function和mixin依旧无效

如上配置的 function和mixin 只会在 vue 文件的 style 标签内生效，对于在 main.ts 中引入的 scss 文件，依然是无效的，要使其在这些 scss 文件中也有效，依然需要再次在使用到的文件中单独引入, 因为vite的机制，就是在vue文件的style标签内容之前追加 additionalData 中配置的内容，因此也就只能在 vue文件的style标签内生效了

custom-tailwind-style.scss

@use './functions' as *;

@layer components {
  .o-dashboard-tab {
    > div {
      width: calc((100% - #{px_to_rem(20)}) / 4);
      background-color: #fff;
    }
  }
}

sass除法运算弃用斜杠 Using / for division outside of calc() is deprecated

css语法里面已经添加了/作为分隔符的使用，sass作为css的超集, 也跟进了该特性，因此/在scss中作除法运算的方式已被废弃，替代方案为

@use "sass:math";

@debug math.div(12px, 4px); // 3

实际示例

@use 'sass:math';

// html文档中根元素的字体大小
$rootFontSize: 16;
/*
将px转换为rem

@param $px px值(数值). 如: 10, 15
@param $baseFontSize 1rem对应的px大小(数值). 默认为$rootFontSize
@return 带rem单位的值. 如:3rem, 1.25rem
*/
@function px_to_rem($px, $baseFontSize: $rootFontSize) {
   // 注意这里的 math.div($px, $baseFontSize) 表示: $px 除以 $baseFontSize
  @return math.div($px, $baseFontSize) * 1rem;
}

参考资料: sass除法运算弃用斜杠 Using / for division outside of calc() is deprecated - 简书 (jianshu.com)

自定义function, 以及使用

@use 'sass:math';

// html文档中根元素的字体大小
$rootFontSize: 16;
/*
将px转换为rem

e.g.
h1{
  // 此时字体大小将被设置为 1.25rem; 1.25rem = 20/16
  font-size: px_to_rem(20);
  left: calc(50% - #{px_to_rem(321)});
}

@param $px px值(数值). 如: 10, 15
@param $baseFontSize 1rem对应的px大小(数值). 默认为$rootFontSize
@return 带rem单位的值. 如:3rem, 1.25rem
*/
@function px_to_rem($px, $baseFontSize: $rootFontSize) {
  @return math.div($px, $baseFontSize) * 1rem;
}

h1{
  // 此时字体大小将被设置为 1.25rem; 1.25rem = 20/16
  font-size: px_to_rem(20); // 普通使用
  left: calc(50% - #{px_to_rem(321)}); // 在calc函数中使用
}

自定义 mixin, 以及使用

/**
不同设备采用多倍图
图片命名风格：
普通图片: xx.png
2倍图: xx@2x.png
3倍图: xx@3x.png

调用示例:
div{ 
    width:30px; 
    height:20px; 
    background-size:30px 20px; 
    background-repeat:no-repeat; 
    @include bgImage('special_1'); 
}
*/
@mixin bgImage($url) {
  background-image: url($url + '.png');
  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    background-image: url($url + '@2x.png');
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + '@3x.png');
  }
}

div{ 
    width:30px; 
    height:20px; 
    background-size:30px 20px; 
    background-repeat:no-repeat; 
    @include bgImage('special_1'); 
}