sass的基本使用

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

}