ubuntu下sass用法指南

1,安装ruby

1
sudo apt-get install ruby

2,安装gem

1
sudo apt-get install rubygems

更新gem

1
gem update

3,安装sass

1
2
3
4
5
6
7
8
9
10
sudo gem install sass

显示:
Successfully installed sass-3.4.21

1 gem installed

Installing ri documentation for sass-3.4.21...

Installing RDoc documentation for sass-3.4.21...

4,测试

比如在/home/zou/sass目录下面建一个文件 test.scss

1
2
3
4
5
6
7
8
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}

当前目录下命令行执行

1
sass test.scss test.css

会在当前目录下生成test.css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
h1 {
font-size: 2em; }

h2 {
font-size: 1.5em; }

h3 {
font-size: 1.2em; }

h1 {
font-size: 2em; }

h2 {
font-size: 1.5em; }

h3 {
font-size: 1.2em; }

/*# sourceMappingURL=test.css.map */

sass

 

 

其他语法见 http://www.w3cplus.com/sassguide/syntax.html

 

5,附录

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

  • nested:嵌套缩进的css代码,它是默认值。

  • expanded:没有缩进的、扩展的css代码。

  • compact:简洁格式的css代码。

  • compressed:压缩后的css代码。
    生产环境当中,一般使用最后一个选项。
    sass –style compressed test.scss test.css
    你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。
    // watch a file

sass –watch input.scss:output.css

// watch a directory

sass –watch app/sass:public/stylesheets

坚持原创技术分享,您的支持将鼓励我继续创作!