使用sass的前提是安装Ruby,如果是Mac系统,那么免去安装,Windows系统需要自行安装https://www.sass.hk/install/.当安装好以后,直接执行安装sass命令:gem install sass
sass文件的后缀名是.scss,如果想要将sass文件转为css文件,那么执行:sass xxx.scss即可.sass的编译风格有四种,但是经常使用生产环境中的编译选项(最后一项):
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。执行命令:sass --style compressed xxx.scss xx.css
为了避免每次都需要手动执行编译,也可以启动监听文件或者目录的方式,每当文件有变动就会自动编译:
sass --watch in.scss out.css //watch file
sass --watch app/sass:app/styles //watch directory
1 变量
1.基本用法是在前面加$,这种仅可以是单变量使用:
$test: #ccc;
div {
color: $test;
}
2.另一种是需要和字符串连起来使用的,这时需要借助#{}使用:
$test: background;
div {
#{$test}-color: #fff;
}
2 计算
这个功能很方便,可以和变量搭配起来使用:
$x: 10%;
div {
padding: $x * 3;
margin: $x * 5;
}
3 嵌套
此功能比较常用,省去了对于写css某元素下的后代设置:
div{
p{
font-size: 16px;
background: #000;
}
}
除了元素可以嵌套外,属性也是可以嵌套的,注意不可以省去冒号:
border: {
radius: 50%;
color: #eee;
width: 5px;
style: solid;
}
使用&来引用父元素,伪元素经常使用:
a{
&:hover{
text-decoration: underline;
color: #999;
}
}
4 注释
sass有两种注释风格,一种是//,另外一种是标准的css编译/* */;如果需要使用到重要注释,那么需要在第一个/*后加个叹号/*! 重要注释 */:
5 继承
继承使用的方式是@extends,允许一个选择器继承另一个:
.a {
font-size: 10px;
}
.b {
@extend .a;
color: #ccc;
}
6 mixin
mixin的使用类似于宏定义,可以重用,而且可以带参数,比如使用@mixin定义一个代码块:
@mixin right1 { //不带参数
margin-right: 15px;
padding-right: 20px;
}
@mixin right2($value: 10px,$r) { //带参数,可以给定缺省值
float: right;
padding-right: $value;
margin-#{$r}: 20px;
}
div {
@include right1;
@include right2(20px,right); //调用,给定实参
}
7 颜色函数
sass提供内置的颜色函数,用于生成系列颜色
- lighten(#cc3, 10%) // #d6d65c
- darken(#cc3, 10%) // #a3a329
- grayscale(#cc3) // #808080
- complement(#cc3) // #33c
8 条件语句
@if opacity > 0.5 {
color: #000;
}@else{
color: #fff;
}
9 循环语句
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
@each $me in a,b,c,d {
.#{$me}{
background-image: url(#{$me.jpg});
}
}
$i: 10;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}
10 自定义函数
@function diy($n) {
@return $n * $n;
}
.side {
width: diy(5px);
}