sass

Sass笔记
1.变量
$c1:#fff;
//声明c1
.home{
Color:$c1;
}
2.嵌套
  ①
Nav{
A{
Color:$c1;
}
//改变选择器的顺序，将&后置，将当前的选择器提到父级
Header  &{
Color:$c2;
}
}
等价于
Header nav a{
}
②
.box{
Border:{
top:1px solid #000;
Bottom:2px solid #000;
}
}
③
.home{
&::befor{
Color:$c1;
}
&:hover{
Color:$c2;
}
}
3、Mixin\extend
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
大括号里面是复用的样式代码。

带参数混合宏：
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
用include调用
Button{
@include border-radius;
}
.btn{
Border:1px solid #000;
}
//继承
.home{
Background:#ccc;
@extend .btn;
}
%m5{
Border:1px solid #000;
}
//占位符
.home{
Background:#ccc;
@extend %m5;
}
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
在字符串中引用变量就得#{$变量}
input[type="submit"]
这种用法
p::after { content: "#{length($colors)}"; 
// 5 color: nth($colors, 1); // #fff}
从1~length
单行注释不会被编译进css中 但是多行注释如果位置写的不对也不会被编译进css中