scss

1. @supports

作用：用于检测当前浏览器是否支持某个css属性，并加载具体样式 链接

@supports (display: grid) {
    .container {
        color: red;
    }
}

当浏览器支持display:grid这一属性时，才会执行里面的样式

该方法还支持逻辑运算符 and or not

@supports not(display: grid){...}
@supports (display: grid) and (position: sticky){...}
@supports (display: grid) or (display: flex){...}

括号中不一定都是关键字，只要是css语法都可以

@supports (border-radius: 4px) or (--btn-color: red){...}

js中也可以调用类似方法

if(CSS.supports('display', 'grid')){
    alert('it support!')
}

2. #{}

作用：变量在字符串中显示

1. 使用变量

$side : left;
.rounded {
　　border-#{$side}-radius: 5px;
}

2. 计算

$sideBarWidth: 200px;
div {
   width: calc(100% - #{$sideBarWidth});
}

3. 导出样式

variables.css内容如下

$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; 
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 210px;
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

index.vue中使用

<template>
	<el-menu
	     :default-active="activeMenu"
	     :collapse="isCollapse"
	     :background-color="variables.menuBg"
	     :text-color="variables.menuText"
	     :unique-opened="false"
	     :active-text-color="variables.menuActiveText"
	     :collapse-transition="false"
	     mode="vertical"
	>
</template>
<script>
	import variables from '@/styles/variables.scss';
	computed: {
		variables() {
		   return variables
		},
	}
</script>

在项目使用scss可以用 “~@/src下的路径” 来引入，相当于vue中的@