SASS用法及compass工具的使用（个人收集）
Author：lmk Date：
一、什么是SASS
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。
二、安装和使用
2.1 安装
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后，就可以使用了。
2.2 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
三、基本用法
3.1 变量
SASS允许使用变量，所有变量以$开头。
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
3.2 计算功能
SASS允许在代码中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3 嵌套
SASS允许选择器嵌套。比如，下面的CSS代码：
div h1 {
color : red;
}
可以写成：
div {
hi {
color:red;
}
}
属性也可以嵌套，比如border-color属性，可以写成：
p {
border: {
color: red;
}
}
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用$引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color: #ffb3ff; }
}
3.4 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/
四、代码的重用
4.1 继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
4.2 Mixin
Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令，调用这个mixin。
div {
@include left;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候，根据需要加入参数：
div {
@include left(20px);
}
下面是一个mixin的实例，用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候，可以像下面这样调用：
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
五、高级用法
5.1 条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
5.2 循环语句
SASS支持for循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
5.3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}#sidebar {
width: double(5px);
}
二，compass工具的使用
1.@import
可以將網站的各部份樣式拆開成_head.scss, _body.scss, _foot.scss放置在base資料夾下，可利用@import功能把3個檔納入到main.css裡 
只要在main.scss加上
@import "base/head"; @import "base/body"; @import "base/foot";
_head.scss, _body.scss, _foot.scss 這些檔案都不會被編譯成css，記得檔案名稱需以 _ 底線作開頭!
2.算數 
3.顏色功能
lighten(red, 50%) //增亮50% darken(blue, 50%) //變暗50%
更多功能參見官方說明
其它筆記!
更換css壓縮樣式
以expanded壓縮方式
sass --watch --style expanded style.scss:style.css
編譯出來的css：
#main { color: #fff; background-color: #000; } #main p { width: 10em; } ...以compressed壓縮方式
sass --watch --style compressed style.scss:style.css
編譯出來的css：
#main{color:#fff;background-color:#000}#main p{width:10em}...
要debug怎麼辨?
1.Firefox裝FireSass for Firebug外掛
2.重新編譯
sass --watch --debug-info style.scss:style.css #開啟debug模式 (記得要先刪原本編譯出的css)
之後在Firebug裡就可以看見啦 
還有線上可以直接測試 http://sass-lang.com/try.html
其實sass/scss只是利於編寫css而產生的一個語言，但今天要寫符合各瀏覽器前綴詞的css，你還是得自已寫@maxin把-moz, -webkit, -o, -ms寫起來，如果遇到要寫css3的gradient呢? 又要可以改參數呢? 那會瘋掉! 因為我寫過，後來就放棄了! 因為有個更強大的Compass來幫忙! 來看看Compass有多厲害!
首先，当然是安装Compass，
gem update --system #先更新 gem gem install compass #安裝Compass
建立Compass项目
compass creat myproject
預設會產生如上面那些檔，接著可以在config.rb裡作設定css、sass、images等的資料夾設定，再依自已喜好吧! 接著在終端機輸入
compass watch
此時你就可以開始編輯你的scss檔了，編輯完存檔，compass會馬上編譯css到你設定的資料夾內，一樣可以按command + c 取消。 下次要再編輯就再watch就好
来看看Compass有哪些方便的地方
reset css
@import "compass/reset";
這樣reset的css就幫你寫好了! 超方便!
常見的css3圓角
@import "compass/css3"; .box{ @include border-radius(5px); }只要先import "compass/css3", 之後就可以使用所有css3 的內容，如border-radius、box-shadow、gradient…等，使用方式是@include，其實是compass幫你寫好了@mixin，你只要會用就好，而compass厲害的就是會同時幫你產生各個瀏覽器相對應的css，上面那行所產生的結果：
-moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
所有css都幫你產生好了，再也不用全寫了，加上寫這麼多重復的css只會更難閱讀，尤其我非常不愛css屬性重寫再重寫又斷行，搞得打開css檔來，1~2千多行! 維護真的相當累人!加上sass的特性是巢狀結構，讓整個css乾淨清楚不少!
css3漸層
.box{ @include background(linear-gradient(lighten(red, 20%), red)); /*線性漸層*/ }一行就搞定所有瀏覽器! 其中lighten(red, 20%)是使用sass的加亮顏色功能。
Sprite
我覺得…做Sprite是css designer的痛吧!維護非常費工，還要計算座標，萬一改個圖，就要座標重算!css再寫，而且改一個可能動全身!
哇~ 現在Compass都幫你搞定啦! Compass真是太強大了，三個願望一次滿足! 只要將要合併的圖片放在同一個資料夾下，compass會自動產生另一張合併檔，同時設定好座標。
@import "icons/*.png"; @include all-icons-sprites; //all-後面接著的「icons」代表著是資料夾名稱
.icons-sprite, .icons-facebook, .icons-twitter, .icons-yahoo { background: url('icons-s0859518ac7.png') no-repeat; } .icons-facebook { background-position: 0 0; } .icons-twitter { background-position: 0 -32px; } .icons-yahoo { background-position: 0 -64px; }更多compass sprite教學及設定: http://compass-style.org/help/tutorials/spriting/
其它還有更多功能: http://compass-style.org/reference/compass/
debug呢?
output_style = :compressed #css壓縮設定 sass_options = {:debug_info => true} #debug開啟config.rb設定檔，加入上面文字後，重新產生css，Firebug就可以看到該樣式是寫在那一行了，sass debug外掛安裝說明。
转载本站文章《SASS用法及compass工具的使用（个人收集）》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/sass/2015_0718_133.html