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;
}
页面调用
-
先引用变量文件
@import “…/…/assets/css/hymeta.scss”; -
引用变量
background: $hy1bcol; -
引用混合器
@include hyrotate( rotate(180deg));