一显晶、 ruby安裝
sass基于Ruby語言開發(fā)而成贷岸，因此安裝sass前需要安裝Ruby。
ruby的下載地址：<u>https://rubyinstaller.org/downloads/</u>
安裝步驟：
第一步：同意協(xié)議：
第二步：添加環(huán)境變量
第三部：安裝完成之后跳出界面點擊finish
第四部：在彈出的命令行回車 更新數(shù)據(jù)庫
第五步：檢測ruby是否安裝成功
在cmd輸入：
ruby -v
輸出ruby的版本表示安裝成功
1．修改ruby的源
第一步：刪除原有的源
gem sources --remove [<u>https://rubygems.org/</u>](https://rubygems.org/)
第二步：添加國內(nèi)的源（淘寶的源已經(jīng)不再維護）
gem sources -a [<u>https://gems.ruby-china.com</u>](https://gems.ruby-china.com)
第三部：檢測是否換源成功
gem sources -l
輸出地址一致表示換源成功磷雇。
2．安裝sass
gem install sass
3．檢測sass安裝是否成功
sass -v
4．安裝compass
gem install compass
5．檢測compass是否安裝成功
compass -v
6．其他命令
更新sass
gem update sass
查看sass幫助
sass -h
7．sass的編譯
/單文件轉(zhuǎn)換命令
sass input.scss output.css
//單文件監(jiān)聽命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目錄偿警，你也可以告訴sass監(jiān)聽整個目錄：
sass --watch app/sass:public/stylesheets
8．sass的編譯參數(shù)
命令行編譯sass有配置選項，如編譯過后css排版唯笙、生成調(diào)試map螟蒸、開啟debug信息等，可通過使用命令sass -v查看詳細崩掘。我們一般常用兩種--style``--sourcemap七嫌。
//編譯格式
sass --watch input.scss:output.css --style compact
//編譯添加調(diào)試map
sass --watch input.scss:output.css --sourcemap
//選擇編譯格式并添加調(diào)試map
sass --watch input.scss:output.css --style expanded --sourcemap
//開啟debug信息
sass --watch input.scss:output.css --debug-info
--style表示解析后的css是什么排版格式;
sass內(nèi)置有四種編譯格式:nestedexpandedcompact``compressed。
--sourcemap表示開啟sourcemap調(diào)試苞慢。開啟sourcemap調(diào)試后诵原，會生成一個后綴名為.css.map文件。
四種編譯排版演示;
//未編譯樣式
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
nested 編譯排版格式
/命令行內(nèi)容/
sass style.scss:style.css --style nested
/編譯過后樣式/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 編譯排版格式
/命令行內(nèi)容/
sass style.scss:style.css --style expanded
/編譯過后樣式/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 編譯排版格式
/命令行內(nèi)容/
sass style.scss:style.css --style compact
/編譯過后樣式/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 編譯排版格式
/命令行內(nèi)容/
sass style.scss:style.css --style compressed
/編譯過后樣式/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
9．編譯sass的軟件
10．在線編譯sass
<u>https://www.w3cschool.cn/tryrun/sass2css</u>
11．sublime text3安裝sass插件
首先你要看的是在preference選項下有沒有package control這個選項挽放，如果沒有的話绍赛，就表示你沒有Package Control 插件（一個方便Sublime text 管理插件的插件），這時辑畦，你就要從菜單 View - Show Console 或者 ctrl + ~ 快捷鍵吗蚌，調(diào)出 console。將以下 Python 代碼粘貼進去并 enter 執(zhí)行纯出，不出意外即完成安裝蚯妇。
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
如果出現(xiàn)以下情況敷燎，則需要手動下載安裝。
下載地址：<u>https://packagecontrol.io/installation</u>
放到Sublime Text 3\Installed Packages目錄中侮措。
出現(xiàn)以下選項表示安裝成功：
接下來安裝sass：
重新打開sublime,Tools(工具) –>Command Palette(命令面板) 快捷鍵ctrl+shift+p懈叹，并輸入install乖杠，選擇第一個Install Pacage分扎，在命令欄中輸入”Sass”然后回車，然后在彈出的列表中選擇Sass插件胧洒，通過鼠標單擊或者回車進行安裝畏吓，可通過左下角狀態(tài)欄查看安裝結(jié)果
同樣的方法，在命令欄中輸入”SassBuild”然后回車卫漫，然后在彈出的列表中選擇SassBuild插件菲饼，通過鼠標單擊或者回車進行安裝，可通過左下角狀態(tài)欄查看安裝結(jié)果
查看安裝的插件列赎，按ctrl+shift+p宏悦，輸入package，選擇list packages包吝，就看到了我們安裝的插件列表饼煞。如果你看到了sass和sass bulid就說明插件安裝成功了。安裝成功后一定要重啟sublime诗越，不要在這里被坑砖瞧。
有可能出現(xiàn)的情況：
解決辦法：
下載channel_v3.json 文件，放置到任意目錄嚷狞，將地址寫入到配置項中块促。
使用sass編譯。
創(chuàng)建編譯規(guī)則：
里面寫入以下內(nèi)容：
{
"cmd": ["sass", "--watch", "C:\\Users\\MDS\\Desktop\\day17-sass:C:\\Users\\MDS\\Desktop\\day17-sass","--style","expanded"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
選擇編譯規(guī)則：
書寫scss文件：
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
進行編譯：Ctrl+B進行編譯床未。
生成的css：
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
/*# sourceMappingURL=t.css.map */
12．sass編碼中文亂碼
CSS很好用…但是有一點不是很人性化的是,除了默認英文注釋.其他注釋需要設(shè)置相應(yīng)的字符編碼才能正確解釋,否則報錯
1.在原生ruby配置的scss, 文件是支持@charset 'utf-8'的
@charset “utf-8”;
- 配置整個環(huán)境
找到ruby的安裝目錄竭翠，里面也有sass模塊，如這個路徑：
C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在這個文件里面engine.rb薇搁，添加一行代碼
Encoding.default_external = Encoding.find(‘utf-8’)
放在所有的require XXXX 之后即可斋扰。
二、 SASS語法
1．sass的格式
sass有兩種后綴名文件：一種后綴名為sass只酥，語法要求不使用大括號和分號褥实；另一種就是我們這里使用的scss文件，這種和我們平時寫的CSS文件格式差不多裂允，使用大括號和分號损离。
//文件后綴名為sass的語法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后綴名為scss的語法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
建議大家使用scss文件后綴。
2．sass的注釋
sass的注釋有兩種绝编。
//單行注釋
/-------/ 多行注釋
3．sass變量
1) 變量的定義與使用
Sass的變量必須是$開頭僻澎，后面緊跟變量名貌踏，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設(shè)置一樣）。任何可以用作css屬性值的賦值都可以用作sass的變量值窟勃，甚至是以空格分割的多個屬性值祖乳，或者以逗號分割的多個屬性值。
$a-color: blue; // 定義變量秉氧。
.box {
color: $a-color; // => blue 使用變量
}
2) 局部變量與全局變量
變量支持塊級作用域眷昆，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用（局部變量）认轨，不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用（全局變量）誊抛。將局部變量轉(zhuǎn)換為全局變量可以添加 !global 聲明纱烘。
/sass style
//-------------------------------
$a-color: blue; // 全局變量
.box {
$a-color: red; // 局部變量祟同，box內(nèi)部不使用随珠。
color: $a-color; // => red 局部變量
}
.child {
color: $a-color; // => blue 全局變量
$main-width: 16em !global; // 在局部定義全局的變量归榕。
}
.main {
width: $main-width; // 使用在內(nèi)部定義的全局變量走芋。
}
/*===============生成的CSS代碼===================*/
.box {
color: red;
}
.child {
color: blue;
}
.main {
width: 16em;
}
3) 特殊變量
如果變量作為CSS屬性或在某些特殊情況下等則必須要以 #{$variables}形式使用陈症。
//sass style
//-------------------------------
$side: top;
.box {
border-#{$side}: 1px solid #09c;
}
//css style
//-------------------------------
.box {
border-top: 1px solid #0098cc;
}
4) 中劃線與下劃線
在sass的大多數(shù)地方漂问，中劃線命名的內(nèi)容和下劃線命名的內(nèi)容是互通的赖瞒，除了變量，也包括對混合器和Sass函數(shù)的命名蚤假。但是在sass中純css部分不互通栏饮，比如類名、ID或?qū)傩悦?/p>
$link-color: blue;
a {
color: $link_color;
}
//編譯后
a {
color: blue;
}
4．嵌套
1) 嵌套規(guī)則
Sass 允許將一套 CSS 樣式嵌套進另一套樣式中勤哗，內(nèi)層的樣式將它外層的選擇器作為父選擇器抡爹。
//sass style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
//css style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
2) 父選擇器（&）
在嵌套 CSS 規(guī)則時，有時也需要直接使用嵌套外層的父選擇器芒划，可以用 & 代表嵌套規(guī)則外層的父選擇器冬竟。
//sass style
//-------------------------------
.box {
border-#{$side}: 1px solid #09c;
&::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
}
//css style
//-------------------------------
.box {
border-top: 1px solid #09c;
}
.box::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
& 必須作為選擇器的第一個字符，其后可以跟隨后綴生成復(fù)合的選擇器民逼。
/sass style
//-------------------------------
#main {
color: black;
&-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
父選擇器標識符還有另外一種用法泵殴，你可以在父選擇器之前添加選擇器。
#content aside {
color: red;
body.ie & { color: green }
}
/*編譯后*/
#content aside {color: red};
body.ie #content aside { color: green }
3) @at-root
@at-root用來跳出當(dāng)前選擇器嵌套拼苍。
//sass style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
@at-root {
@keyframes motion {
...
}
}
}
//css style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
}
@keyframes motion {
...
}
4) 子組合選擇器
article section { margin: 5px }
5) 同層組合選擇器：>笑诅、+和~
上邊這三個組合選擇器必須和其他選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素疮鲫。
可以用子組合選擇器>選擇一個元素的直接子元素吆你。
可以用同層相鄰組合選擇器+選擇一個元素后緊跟的某一類元素
以用同層全體組合選擇器~，選擇所有跟在指定元素后的同層某類元素俊犯，不管它們之間隔了多少其他元素:
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//sass編譯后
rticle ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
5．運算
Sass支持多種數(shù)據(jù)類型的變量妇多，比如：
數(shù)字，1, 2, 13, 10px
字符串燕侠，有引號字符串與無引號字符串者祖，"foo", 'bar', baz
顏色立莉，blue, #04a3f9, rgba(255,0,0,0.5)
布爾型，true, false
空值七问，null
所有數(shù)據(jù)類型均支持相等運算 == 或 !=蜓耻，此外，每種數(shù)據(jù)類型也有其各自支持的運算方式械巡。
1) 數(shù)值運算
Sass支持數(shù)字的加減乘除刹淌、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉(zhuǎn)換值坟比。
//sass style
//-------------------------------
.box {
height: 17px + 20px; // => 37px 數(shù)字加法運算
width: (75rem/16); // => 4.6875rem 除法運算
color: #303030*2; // => #606060; 乘法運算（顏色運算）
padding: 20px - 3; // => 17pex 數(shù)字減法
font-family: sans- + "serif"; // => sans-serif 字符串加法
width: 1em + (2em * 3); // 帶括號的運算
}
//css style
//-------------------------------
.box {
height: 37px;
width: 4.6875rem;
color: #606060;
padding: 17px;
font-family: sans-serif;
width: 7em;
}
6．條件語句
sass具有條件語句芦鳍，當(dāng) @if 的表達式返回值不是 false 或者 null 時嚷往，條件成立葛账，輸出 {} 內(nèi)的代碼。
//sass style
//-------------------------------
$w: 960px;
$type: monster;
.box {
@if 2*3 > 5 { // 簡單if判斷語句
color: red;
}
@if $w > 900px {
width: $w;
} @else { // if else 語句
width: 900px;
}
@if $type == ocean { // 多個if和else語句
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
//-------------------------------
.box {
color: red;
width: 960px;
color: green;
}
說明：@if 聲明后面可以跟多個 @else if 聲明皮仁，或者一個 @else 聲明籍琳。
如果 @if 聲明失敗，Sass 將逐條執(zhí)行 @else if 聲明贷祈，如果全部失敗趋急，最后執(zhí)行 @else 聲明
7．循環(huán)語句
@for 指令可以在限制的范圍內(nèi)重復(fù)輸出格式。類似for循環(huán)势誊。
兩種格式：
@for $var from <start> through <end> :條件范圍包含 <start> 與 <end> 的值
/scss style
//------------for througth循環(huán)-------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
@for $var from <start> to <end>: 圍只包含 <start> 的值不包含 <end> 的值
//scss style
//------------for to 循環(huán)-------------------
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
8．遍歷
@each 指令的格式是 var 可以是任何變量名呜达，比如
name，而 <list> 是一連串的值粟耻，也就是值列表查近。
//sass style
//-------------------------------
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image: url("/images/salamander.png");
}
復(fù)雜對應(yīng)each
//sass style
//-------------------------------
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
9．混合指令
利用混合器，可以很容易地在樣式表的不同地方共享樣式挤忙。如果你發(fā)現(xiàn)自己在不停地重復(fù)一段樣式霜威，那就應(yīng)該把這段樣式構(gòu)造成優(yōu)良的混合器，尤其是這段樣式本身就是一個邏輯單元册烈，比如說是一組放在一起有意義的屬性戈泼。判斷一組屬性是否應(yīng)該組合成一個混合器，一條經(jīng)驗法則就是你能否為這個混合器想出一個好的名字赏僧。
1) 不帶參數(shù)的簡單Mixin
混合指令（Mixin）用于定義可重復(fù)使用的樣式大猛，可以直接把一整段Sass代碼替換到某個地方去。
//sass style
//-------------------------------
// 定義mixin reset, 用@mixin開頭淀零，后面跟空格和混合塊的名字挽绩。然后是語句塊
@mixin reset {
padding: 0;
margin: 0;
}
html, body, div , input {
@include reset(); // 引用 reset 混合塊。用@include指令引用混合塊窑滞。
}
//css style
//-------------------------------
html, body, div, input {
padding: 0;
margin: 0;
}
2) 帶參數(shù)的mixin
Mixin還可也添加參數(shù)琼牧，跟函數(shù)一樣使用恢筝。
//sass style
//-------------------------------
@mixin sexy-border($color, $width) {
border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }
//css style
//-------------------------------
p {
border: 1px solid blue;
}
3) 默認參數(shù)的mixin
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
4) 函數(shù)指令
雖然Mixin功能強大，但是某些場景下還是函數(shù)應(yīng)用更方便巨坊，Sass也提供了自定義函數(shù)的用法撬槽。
//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;
// 定義自定義函數(shù) grid-width
@function grid-width($n) { // 接受一個參數(shù)$n
@return $n * $grid-width + ($n - 1) * $gutter-width; // 返回值。
}
#sidebar { width: grid-width(5); } // 在屬性中調(diào)用函數(shù)
//css style
//-------------------------------
#sidebar {
width: 240px;
}
4．繼承（擴展）
1) 基本繼承
sass中趾撵，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式侄柔，并聯(lián)合聲明。使用選擇器的繼承占调，要使用關(guān)鍵詞 @extend暂题，后面緊跟需要繼承的選擇器。
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1, .speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
2) %占位符
以定義占位選擇器 %究珊。這種選擇器的優(yōu)勢在于：如果不調(diào)用則不會有任何多余的css文件薪者，避免了以前在一些基礎(chǔ)的文件中預(yù)定義了很多基礎(chǔ)的樣式，然后實際應(yīng)用中不管是否使用了 @extend去繼承相應(yīng)的樣式剿涮，都會解析出來所有的樣式言津。占位選擇器以 %標識定義，通過 @extend調(diào)用取试。
//sass style
//-------------------------------
%ir { // 定義占位符悬槽。沒有選擇器名字的一段代碼而已。
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1, .ir {
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1 {
width: 300px;
}
11．文件導(dǎo)入
Sass的導(dǎo)入( @import)Sass文件規(guī)則和CSS的有所不同瞬浓，編譯時會將 @import的scss文件合并進來只生成一個CSS文件初婆。
但是如果你在Sass文件中導(dǎo)入css文件如 @import 'reset.css'，那效果跟普通CSS導(dǎo)入樣式文件一樣猿棉，導(dǎo)入的css文件不會合并到編譯后的文件中磅叛，而是以 @import方式存在。
所有的Sass導(dǎo)入文件都可以忽略后綴名 .scss铺根。一般來說基礎(chǔ)的文件命名方法以_開頭宪躯，如 _mixin.scss。這種文件在導(dǎo)入的時候可以不寫下劃線位迂，可寫成 @import "mixin"访雪。
//sass style
//-------------------------------
@import "reset.css"; // 導(dǎo)入css文件，不會進行編譯掂林。
@import "a"; // 導(dǎo)入a.scss 文件臣缀，后綴省略
p{
background: #0982c1;
}
//css style
//-------------------------------
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
三、 Compass
Compass是一個強大的Sass框架,它的設(shè)計目標是順暢泻帮、高效地裝扮互聯(lián)網(wǎng),使用它的人可寫出可維護性更高的樣式表精置。
Compass 七大模塊：
Reset
Layout
CSS3
Helpers
Typography
Utilities
Browser
Compass 核心模塊
Reset
Layout
@import "compass/reset"
@import "compass/layout"
Browser 模塊：
Browser 用來配置compass默認支持哪些瀏覽器,對于特定瀏覽器,默認支持到哪個版本.
Browser 中的配置一旦修改,將影響其余6個模塊的輸出,因為需要針對不同的瀏覽器做不同的適配.
reset模塊：
reset 是 compass 內(nèi)置的，如果我們想修改為 normalize锣杂。
命令行使用 gem install compass-normalize
然后在 config.rb 配置文件中添加
require 'compass-normalize'
然后在 scss 文件中 @import "normalize";
layout 模塊：
如果說 reset 模塊是 compass 中使用起來最簡單的模塊脂倦，那么番宁，layout 模塊則是 compass 中使用率最低的模塊。Layout 模塊用來實現(xiàn)頁面布局控制的赖阻。
CSS3模塊：
如果說 Layout 模塊是 compass 中使用率最低的模塊蝶押，那么，CSS3 模塊肯定是主動使用率最高的模塊火欧。
CSS3 模塊主要用于提供跨瀏覽器的 CSS3 能力棋电。
Typography 模塊：
Typography 模塊主要用來修飾文本樣式、垂直韻律等(Links苇侵、Lists赶盔、Text、Vertical Rhythm)
Utilities 模塊：
Utilities 模塊是輔助工具類函數(shù)
helpers 模塊：
helpers 類里面多是函數(shù)榆浓，utilities 里面多是 mixin于未，包含：
Color : 顏色相關(guān)的工具集合
Print : 打印控制的集合
Tables : table樣式相關(guān)的集合(table model)
Geeneral : 通用的一般類的工具(跨瀏覽器的清除浮動)
Sprites : 精靈圖合圖相關(guān)的工具集合(重點)
1．創(chuàng)建一個Compass項目
確保電腦已經(jīng)安裝Ruby環(huán)境，并且安裝了Sass和Compass
compass create sample //sample代表自己的文件
2．compass命令
compass編譯哀军。
進入項目根目錄：
cd sample //cd代表上一層
執(zhí)行編譯
compass compile
編譯輸出格式：
--output-style compressed 輸出壓縮格式
Compass只編譯發(fā)生變動的文件沉眶，如果你要重新編譯未變動的文件，需要使用--force參數(shù)杉适。
compass compile --force
除了使用命令行參數(shù)，還可以在配置文件config.rb中指定編譯模式柳击。
output_style = :expanded
config.rb的配置文件可以這樣設(shè)置猿推，可以通過指定environment的值（:production或者:development），智能判斷生成的stylesheets文件夾里面的編譯模式（是開發(fā)環(huán)境模式捌肴，還是壓縮輸出模式）蹬叭。
# environment = :development //用以開發(fā)環(huán)境
environment = :production //使用壓縮輸出模式
output_style = (environment == :production) ? :compressed : :expanded
監(jiān)聽命令：運行該命令后，只要scss文件發(fā)生變化状知，就會被自動編譯成css文件秽五。
compass watch
3．一些其他的命令
compass init——為一個已經(jīng)存在的項目（Rails）添加compass；
compass clean——移除生成的文件和緩存饥悴；
compass stats——查看樣式表的統(tǒng)計數(shù)據(jù)坦喘；
compass unpack <extension>——解壓擴展到你的項目；
compass validate——驗證你生成的CSS文件西设；
compass version——顯示版本瓣铣、許可證，等等贷揽；
compass interactive——進入一個用于測試Compass中SassScript的控制臺棠笑。
compass help <具體命令>——獲得幫助/具體命令的詳細描述
4．使用Compass解決真實的CSS問題
1) 樣式重置
compass的樣式重置：在css中將body、html禽绪、ul蓖救、ol洪规、等標簽的在css中的邊框、樣式都清除循捺。
@import "compass/reset"
通過Sass引入命令@import引入Compass的重置模塊;
reset模塊是Compass框架中獨立的一部分,可被隨意引用到項目中;
通過加入這行代碼,生成的CSS文件中就會包含CSS重置部分的代碼;
@include reset-html5
輸出文件中會生成額外的CSS規(guī)則來對HTML5的元素進行基本的樣式修改,
2) 引入基本布局--Blueprint網(wǎng)格布局
compass create my_grid --using blueprint
@include column($sidebar-columns);
3) 通過表格輔助器為表格添加更加專業(yè)的斑馬條紋樣式
@import "compass/utilities/tables";
table {
$table-color:#666; // 定義變量;
@include table-scaffolding; // 引入混合器;提供最基本的樣式修飾;
@include inner-table-borders(1px, darken($table-color,40%));// 添加單元格邊框;
@include outer-table-borders(2px); // 添加表格邊框;
@include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222); // 添加斑馬條紋樣式;
}
4) CSS3前綴支持
@import "compass/css3"
Sass:
.rounded {
@include border-radius(5px);
}
CSS:
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
