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