常用scss技巧

常用scss技巧

---

实用scss技巧，文件名用_开头，不会被编译成css文件例如下面代码中的_globals.scss

@import "_globals";//导入全局变量//不确定混入参数
@mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}@mixin transform($property) {-webkit-transform: $property;//用于支持 WebKit 内核的浏览器（如 Safari、旧版 Chrome）-ms-transform: $property;//用于支持 IE 浏览器transform: $property;//标准的 CSS 属性，用于现代浏览器
}.myBox {@include transform(rotate(20deg));//旋转20度
}@mixin containerGe($direction: row, $height, $width, $color: red) {display: flex;flex-direction: $direction;height: $height;width: $width;background: $color;padding: 10px;margin: 10px;
}//定义变量
$global-height:500px;.container {// 滚动条overflow-y: scroll;/*滚动条1*//*!滚动条2*/@include containerGe(column, $global-height, 500px, green);background-color: $background-color;div {// @extend .container;//继承别的样式90@include containerGe(row, 200px, 100px, yellow);//&代表父元素选择器&:hover{border: 5px solid red;}}
}