一首歌的时间说说实际项目中常用的sass特性

       sass是一款强化css的辅助工具，它在css语法的基础上增加了变量、嵌套、混合、导入等高级功能，使得css更加强大与优雅，项目的开发更加高效。css预处理器就是用一种专门的编程语言，为css增加了一些编程的特性。sass可以说是功能最强大的css预处理器，下面总结一下，实际项目开发中，常用的一些sass特性 （sass是基于Ruby开发，windows系统中需要安装ruby，mac不需要，因为自带ruby）

1 变量
用$来表示，还可以镶嵌到字符串中

// 这样就定义了一个叫primary的变量，它的值是#999
$primary: #999

// 使用的时候
color: $primary

// 镶嵌的使用，外面加一个#{}
$con: top
padding-#{$con}: 2px

2 计算
可以直接在样式里计算，加减乘除等操作都可以

padding-top: 2px + 30px

3 嵌套
常见用法

.content {
     span {
        display：inline-block
     }
 }

遇到伪类选择器时，加一个&

.content {
     &:hover {
        color: red
     }
 }

属性也可以嵌套

span {
     font: {
        size: 12px;
        weight: 400;
     }
 }

4 混入mixin
对于一个需要经常复用的样式，可以先写好一份，之后用到的时候，通过@include引入它，还支持传入参数

@mixin one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 使用时
div{ 
   @include one-line; 
}

5 继承
使用@extend实现

.content {
  background-color: red
}
.content {
   span {
     display: inline-block
  }
}
.new{ 
  @extend .content; 
}

.new除了继承content的样式，也继承了content底下所有的样式

6 导入外部文件
直接在css里引入外部样式表

@import url(../../assets/css/config);

7 条件语句
用@if来判断，符合条件，使用对应的样式。还有@else，@else if

div{
@if 4 < 6 {color: red}
}

8 循环语句
支持@for，@while，@each

@for $i from 1 through 3 {
   .item-#{$i}{
     color: red
   }
}

// 编译后等于
.item-1{
  color: red
}
.item-2{
  color: red
}
.item-3{
  color: red
}

//@each
@each $boy in school, home { 
  .item-#{$boy} { 
     color: red
} 
}
// 编译后等于
.item-school{
  color: red
}
.item-home{
  color: red
}

// @while
$i: 2;
@while $i < 3 { 
 .item-#{$i} { 
      width: 2px * $i; 
  } 
   $i: $i + 2;
}
// 编译后
.item-2{
   width: 4px; 
}

9 自定义函数
@function实现

@function Hello($a){
  @return $a + 1px;
}
p{
  width: Hello(10px)
}