SASS 用法指南

什么是 SASS

SASS 是一种 CSS 开发工具,提供了许多便利的写法,使得 CSS 编写变得简单和可维护。本文总结了 SASS 的常用用法,高手可略过,也可参考官方文档

安装

使用 SASS 需要安装 Ruby ,Windows 用户可在这 下载 Ruby 的安装包。假定你已经安装好了 Ruby ,接着在命令行输入下面的命令进行安装。

1
$ gem install sass

可以通过 sass -v 来检测 SASS 是否安装成功。

由于国内网络原因,导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时我们可以利用淘宝提供的 RubyGems 镜像 ,在命令行输入下面命令。

1
2
3
4
5
$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org

若切换淘宝提供的镜像是提示 SSL certificate verify failed 相关的信息,那需要进一步的设置。下面是简单描述:

  1. https://curl.haxx.se/ca/cacert.pem 下载证书,一般放到 Ruby 安装的根目录即可。
  2. 设置环境变量,变量名为 SSL_CERT_FILE 值为证书地址。如:D:\Program Files\Ruby23-x64\cacert.pem
  3. 重启客户端,再重新设置
  4. 可参考 https://gist.github.com/fnichol/867550http://www.csdn123.com/html/topnews201408/35/3635.htm

另外提醒一下 npm 也存在同样的情况,也可换成 淘宝 NPM 镜像

1
2
$ npm config set registry https://registry.npm.taobao.org
$ npm config get registry

使用

SASS 文件是普通的文本文件,文件后缀名是 .scss ,我们需要将其编译成 *.css 的文件来使用,命令如下。

1
2
$ sass test.scss test.css
$ sass --style compressed test.sass test.css

SASS 提供四个编译风格的选项

1
2
3
4
5
6
7
1. nested:嵌套缩进的css代码,它是默认值。
2. expanded:没有缩进的、扩展的css代码。
3. compact:简洁格式的css代码。
4. compressed:压缩后的css代码。

你也可以让 SASS 监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

1
2
3
$ sass --watch input.scss:output.css // watch a file
$ sass --watch app/sass:public/stylesheets // watch a directory

Ctrl + C 可停止监听,另外还有一个在线转换器,你可以在那里,试运行下面的例子。

基本用法

1.注释

SASS 共有两种注释风格

  • 标准的 CSS 注释 /* comment */ ,会保留到编译后的文件。
  • 单行注释 // comment ,只保留在 SASS 源文件中,编译后被省略。

/* 后面加一个感叹号,表示这是”重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

1
2
3
/*!
重要注释!
*/

2.变量

SASS 允许使用变量,所有变量以 $ 开头。如果变量需要镶嵌在字符串之中,就必须需要写在 #{} 之中。

1
2
3
4
5
6
7
8
9
10
$blue : #1875e7;
$side : left;
div {
color : $blue;
}
.rounded {
border-#{$side}-radius: 5px;
}

3.计算功能

1
2
3
4
5
body {
 margin: (14px/2);
 top: 50px + 100px;
 right: 2 * 10%;
}

4.嵌套

1
2
3
4
5
div {
h1 {
color:red;
}
}

属性也可以嵌套

1
2
3
4
5
6
7
p {
border:{
width:1px;
color:#f90;
style:solid;
}
}

在嵌套的代码块内,可以使用 & 引用父元素

1
2
3
4
5
6
a {
color:#000;
&:hover {
color: green;
}
}

5.继承

1
2
3
4
5
6
7
8
9
.class1{
width: 100px;
height:100px;
}
.class2{
@extend .class1;
background-color: #fa0;
}

上面示例编译后

1
2
3
4
5
6
7
8
.class1, .class2 {
width: 100px;
height: 100px;
}
.class2 {
background-color: #fa0;
}

6.Mixin

1
2
3
4
5
6
7
8
9
@mixin rounded($vert, $horz, $radius:10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
div {
@include rounded(top, left, 5px);
}

7.插入文件

@import 命令,用来插入外部文件。如果插入的是 .css 文件,则等同于 css 的 import 命令。

1
@import '*.scss';

8.自定义函数

1
2
3
4
5
6
7
@function double($n){
@return $n * 2;
}
.testDouble{
width:double(100px);
}

结语

更多特性可自行查看 SASS 官网,和 SASS 类似的有 LESS ,可百度了解。另外还有一个强悍的 SASS 工具库 Compass

相关阅读