sass 的高级语法补充

1、变量

SASS允许使用变量，所有变量以$开头

　$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

2、引用父元素&可以重用的代码块

　a {
　　　　&:hover { color: #ffb3ff; }
　　}

3、继承

.class1 {
　　border: 1px solid #ddd;
}


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

4、可以重用的代码块

　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

5、混入，调用可以重用的代码块

@mixin roundborder($myborder: 10px) {
    border-radius: $myborder;
}

.box {
    @include roundborder(25px);
}

6、计算

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

7、判断和循环

@for $i from 1 to 8 {
    &.slide0#{$i} {
        background: url("../images/02-head-icons/0#{$i}.jpg") no-repeat top left / 100% 100%;

        @if $i > 5 {
            border: 3px solid #000;
        }
    }
}注意要用#{$i}这样包裹起来

8、插入文件合并

　@import "path/filename.scss";

　@import "foo.css";