vue配置sass全局变量

vue配置sass全局变量

很多时候sass的样式可以重复利用，或者颜色，背景、字体等都可以重复使用，因此可以将其设为全局变量，以便在sass中重复利用

背景、颜色、圆角等变量

$hy1bcol:rgba(51, 133, 255, 0.8); //背景
$hy1fcolv: #FF9800; //突出颜色，黄橙色
$hy1bsha:1px 2px 1px rgba(0, 0, 0, .15); //常用阴影,较为平滑，主要用于搜索框内部下拉
$hy1rad1:3px; //常用圆角

混合器（可以使用变量，也可以从外部接收参数）

@mixin hyrotate($angle) {
//旋转
-webkit-transform: $angle;
transform: KaTeX parse error: Expected 'EOF', got '}' at position 8: angle; }̲ @mixin hytrans…transition) {
//过渡动画
-webkit-transition: $transition;
transition: $transition;
}
@mixin hydetailbox {
//下拉框
display: none;
position: absolute;
top: 0px;
background: $hy1bcol;
border-bottom-left-radius: $hy1rad1;
border-bottom-right-radius: $hy1rad1;
box-shadow: $hy1bsha;
cursor: pointer;
height: auto;
}

页面调用

1. 先引用变量文件
   @import “…/…/assets/css/hymeta.scss”;
2. 引用变量
   background: $hy1bcol;
3. 引用混合器
   @include hyrotate( rotate(180deg));