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 h 1 {

     color :  red ;

}

//sass代码

div{

     h 1 {

         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

.class 1 {

     border :  1px  solid  #ddd ;

}

.class 2 {

     @extend .class 1 ;

     font-size : 120% ;

}

//编译后css

.class 1 ,.class 2 {

     border :  1px  solid  #ddd ;

}

.class 2 {

     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 );

}