1、setting
如果不需要支持ie6,7,请在引入setting文件之前,设置$lte7:false;
。
$lte7: true !default 表示的是是否兼容it6/7
2、css3 是一些兼容性质的问题
@include border-image(url(img.png) 3 round);
@include box-shadow(0 0 5px rgba(11,22,33));
@include display-flex; flex-direction ; 等设置在父容器上面
@include flex(2);设置在子元素上面的
3、media是一些响应式布局的判断,对手机等兼容较好
4、mixin
@extend是联合声明的 @include是直接在选择器内生声明的
// px转em
@function pxToEm($px, $base: 16) {
@return ($px / $base) * 1em;
}
// px转rem
@function pxToRem($px, $base: 40) {
@return ($px / $base) * 1rem;
}// font-size自适应
@mixin font-dpr($font-size){
font-size: $font-size /2;
[data-dpr="2"] & {
font-size: $font-size;
}
[data-dpr="3"] & {
font-size: $font-size /2 * 3;
}
}@mixin px2px($name,$font-size){
#{$name}: $font-size;
[data-dpr="2"] & {
#{$name}: $font-size * 2;
}
[data-dpr="3"] & {
#{$name}: $font-size * 3;
}
}
@mixin
通过@include
来调用;%
通过@extend
来调用;@function
则是返回一个值。