关于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定义代码块，使用@include使用代码块,@mixin还可以传参,可以利用参数来生成浏览器前缀，不过这些可以用自动化工具gulp完成，所以不推荐吧。

@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.插入文件
css，sass文件引入都差不多

@import "path/1.scss";
@import "foo.css";

7.条件语句

@if @else可以用来判断

p{
    @if 12+2==14{
        color:#fff;
    }@else{
        color:#000;
    }
}

8.循环语句
for循环

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

总结

差不多比较常用的就这些吧，总结一下，变量基本就跟php差不多，function，return，for，mixin，include，extend...这些东西基本都要在前面加个@符号。然后运算符左右两边要加空格。

比较重要的就是@mixin的使用和@extend的使用。可以提高代码的复用率，这也是我们使用sass的原因。

关于sass的个人总结。原创