sass/scss使用技巧

• 解决sass/scss变量与JS共享的方法：

//variables.scss

//主色调
$mainColor: #2672c8;

//常规间距
$space: 20px;

//入口页左侧栏宽度
$asideWidth: 250px;

//入口页顶部栏高度
$topsideHeight: 100px;

//这里导出是关键
:export {
  mainColor: $mainColor;
  space: $space;
  asideWidth: $asideWidth;
  topsideHeight: $topsideHeight;
}

js文件使用sass/scss变量：

*.vue

import variables from 'variables.scss';

export default {
    data() {
        return {
            mainColor: variables.mainColor,
        }
    }
};

---

• calc里使用sass/scss变量方法：

.style{
    width: calc(100% - #{$asideWidth});
}