scss 语法

scss在项目中使用方便，简洁~

1.定义变量

$color:red;
.box{
        background-color:$color;        
}

2.嵌套css

#content{
    div{
        aside{
            background-color: red;
        }
        h1{
            color: green;
        }
    }
}

3.父选择器标识符

#content{
    div{
        aside{
            background-color: red;
        }
        a{
            color: red;
            &:hover{
                color: blue;
            }
        }

    }
}

4.嵌套属性

nav{
    border{
        width:1px;
        style:solid;
        color:red;
    }
}

5.混合

   先定义要混合的样式：@mixin

@mixin corners{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}

  使用：@include

div{
    width: 200px;
    height: 100px;
    @include corners;
}

6.继承

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

7.函数的使用

$fontSize:37.5;
@function px3rem($px){
       @return  ($px/$fontSize) +rem ;
}

8.控制指令

if

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

9.导入文件

@import 'reset';

10.注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

　以上为sass的基础语法，详细内容请参考https://www.sass.hk/网站。