sass语法个人总结

1.变量一般以$开头

$blue:#1875e7;

div{

    color:$blue;

}

变量嵌套在字符串中，需要写在#{}中

$directive:left;

.warpper{

    border-#{$directive}-radius: 5px;

}

---

2.计算功能

$var =0.1;

body{

    margin: (14px / 2);

    top: 50px + 10px;

    right: $var * 100%;

}

注意这里符号的左右两边要加空格，不然可能会报错。

---

3.嵌套

//css代码

div h1{

    color: red;

}

//sass代码

div{

    h1{

        color: red;

    }

} 

属性也可以嵌套的，比如border-color属性

p{

    border:{

        color:red;

        style:solid;

    }

}

在嵌套中，可以使用& 引用父元素，比如a:hover,a:after

a{

    &:hover{

        color:#fff;

    }

    &:after{

        content:'';

        clear:both;

        display:block;

    }

}

---

4.继承

//sass

.class1{

    border: 1px solid #ddd;

}

.class2{

    @extend .class1;

    font-size:120%;

}

//编译后css

.class1,.class2{

    border: 1px solid #ddd;

}

.class2{

    font-size:120%;

}

---

5.mixin

@mixin left{

    float:left;

    margin-left:10px;}div{

    @include left;

}

@mixin right($value : 10px){

    float:right;

    margin-right: $value;}a{

    @include right(20px);

}

@mixin rounded($radius:10px){

    border-radius:$radius;

    -moz-border-radius:$radius;

    -webkit-border-radius:$radius;

}

ul li{

    @include rounded(5px);

}

//... 表示数量可变的参数

@mixin box-shadows($shadow...){

    box-shadow: $shadow;}

div{

    @include box-shadows(0 0 5px #333, 1px 5px 3px #ccc);

}

---

6.插入文件

@import "path/1.scss";

@import "foo.css";

---

7.条件语句

@if @else可以用来判断

p{

    @if 12+2==14{

        color:#fff;

    }@else{

        color:#000;

    }

}

---

8.循环语句

@for  $i form 1 to 10{

    .border-#{$i}{

        border: #{$i}px solid blue;

    }

 }

while循环

$i:6;@while $i>0{

    .item-#{$i}{

        width:4px * $i;

    }

    $i: $i - 2;

}

each命令

@each $member in a,b,c,d{

    .#{$member}{

        background-image: url("img/#{$member}.jpg");

    }

}

---

9.自定义函数

@function double($n){

    @return $n * 2;

}

#sidebar {

    width: double(5px);

}