Sass学习笔记

1、使用变量  $

$c:center  //声明变量
li{align-item:$c}  //使用变量

2、父级选择器  &

<li class="on"><span class='adorn'>
 </span></li>
scss:
li{
    margin-bottom: 20px;
    margin-right: 20px;
    display: flex;
&.on{
    border-color: #009588;
    .adorn {
        display: block;
       }
    }
}
&:hover{ background:blue;}
相当于  li.on{}  

3、嵌套规则

　　CSS 中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个 ID 或类名：

.aaa div{background:red; }
.aaa div h1{font-size:50px;}
.aaa div p{ margin-top:20px;}
.aaa input{ margin-left:20px;}

 　像这种情况，sass 可以让你只写一遍，且使样式可读性更高。在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass 在输出 css 时会帮你把这些嵌套规则处理好，　　　　避免你的重复书写。

.aaa{
    div{
    background:red;
        h1{
        font-size:50px;
        }
        p{
        margin-top:20px;
        }
    }
    input{
    margin-left:20px;
    }
}

4、混合器@mixin

@mixin blend_button{width:100px;height:100px}
button{@include blend_button;
      background_color:yellow}
相当于 
button{width:100px;height:100px;
      background_color:yellow}

 给混合器传参

@mixin ellipsis($width){
    max-width:$width
}
input{
@include ellipsis(100px)
}

传多个参数

@mixin ellipsis($normal,$hover){
    color:$normal;
    &:hover:{color:$hover}
}
input{
@include ellipsis(blue,red)
}
// 不用在乎先后顺序的传参
input{
@include ellipsis($normal:blue,$hover:red);
}

5、深度选择器deep：

　　当组件使用了第三方组件库，需要在当前组件控制第三方组件的样式时，使用deep使深样式作用更深

/deep/.ivu-form

6、#{} 

　　在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值

p:before{
    content:'I ate #{1+2} pies'
    }

7、 @if  条件语句

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  }  @else {
    color: black;
  }
}

　　@for  循环语句

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
// 相当于 
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

　　@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}