sasscore22

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则是返回一个值。