scss基础运用

今天学了什么

变量

     $bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
  margin-#{$place}:20px;
}

计算功能

       body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

嵌套

      div h{
  color:red;
}
可以改写为
　div {
　　　　hi{
　　　　　　color:red;
　　　　}
　　}

继承

     SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
　　　　border: 1px solid #ddd;
　　}

.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

Mixin

       可以重用的代码块
　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

div {
　　　　@include left;
　　}