常用sass语法

总结一下个人项目中用到的sass语法

@extend:继承样式块
继承已经存在的样式块

.btn { 
    border: 1px solid #ccc; 
    padding: 6px 10px;
}
.btn-primary { 
    background-color: #f36;
    @extend .btn;
}

继承不存在的样式块（占位符%）
%placeholder{
color:red;
}
他跟直接继承已经存在的样式不同的是如果占位符不被@extend调用的话，不会产生任何代码（就是说这个占位符不在样式中占用空间，压根不存在）

变量引用

$fontSize:14px;
.demotest{
  font-size:$fontSize;
}

还有一种变量设置多个参数（用nth）

$color:#fff #ec9035 #ec5f3a #ED5F3B #000;
a{
    color:nth($color,1)
}

嵌套(选择器嵌套、属性嵌套、伪类嵌套)
选择器嵌套

.nav{
    backgrond-color:red;
    a{
        color:#fff;
     }
}

属性嵌套

.box{
    border:{
      top:1px solid #eee;
      bottom:1px solid #ddd;
    }
}

伪类嵌套（需要借助’&’符）

.clearfix {
    display: block;
    &:after{
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
}

@include调用声明好的混合宏
混合宏通过**@mixin声明，用于需要重复使用大段样式，比如一些带前缀的兼容性写法，需要传参的带参数混合宏，还有复杂的混合宏（带有if else判断**的）

运算
可以加减乘除，注意单位，加减单位相同，乘只能有一个带单位

循环
1、for
@for $i from through //关键字 through 表示包括 end 这个数
@for $i from to //而 to 则不包括 end 这个数

$grid-prefix: money-bg !default;
$grid-img: bg !default;
@for $i from 1 through 2{//through表示包含2，to表示不包含2
 .#{$grid-prefix}#{$i}{
        background:url(../img/#{$grid-img}#{$i}.png);
        line-height: 35px;
    }
}

编译后：

.money-bg1 {
  background: url(../img/bg1.png);
  line-height: 35px;
}
.money-bg2 {
  background: url(../img/bg2.png);
  line-height: 35px;
}

2、each

// 设置element tooltip样式
$list: right left top bottom;
@each $i in $list {
    .<tooltipClassName>[x-placement^=#{$i}] .popper__arrow {
        border-#{$i}-color:  <color>;
        &:after {
          border-#{$i}-color:  <color>;
        }
    }
}

编译后

.<tooltipClassName>[x-placement^="right"] .popper__arrow {
  border-right-color:  <color>;
  &:after {
    border-right-color: <color>;
  }
}

.<tooltipClassName>[x-placement^="left"] .popper__arrow {
  border-left-color:  <color>;
  &:after {
    border-left-color:  <color>;
  }
}

.<tooltipClassName>[x-placement^="top"] .popper__arrow {
  border-top-color:  <color>;
  &:after {
    border-top-color:  <color>;
  }
}

.<tooltipClassName>[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: <color>;
  &:after {
    border-bottom-color:  <color>;
  }
}

@debug、@warm、@error
用来调试的，当编译出错时输出你设置的提示信息

@at-root
使用选择器嵌套时跳出根元素

.c { color: yellow; 
      @at-root .d { color: green; }
 } 

此时class c、d为兄弟标签

percentage($value)
将一个不带单位的数转换成百分比

.footer{
    width : precentage(20px / 200px);
}

类似还有ceil()（只做入不做设比如12.3编译出来为13），**round()**四舍五入，floor()与ceil())相反只做舍不做入，**abs()**返回绝对值，max()，min()，random()

join,append
合并添加值

map-get
根据给定的key值，返回map中相关的值

$length:(
    baifenbai:100%,
    baifenwushi:50%,
    baifensan:3%,
    ling:0,  
);
html{
   width:map-get($length,baifenbai)；
}

@import
嵌套

//example.scss文件
.example{ color:red};
//引用
#main{@import "example";}
//编译后
#main .example{color:red}