一、參考文獻
- 安裝Sass和Compass
https://www.sass.hk/install/ - sublime text 3 中 安裝sass插件 以及配置和監(jiān)視
https://blog.csdn.net/yanghongfei110/article/details/81411789?tdsourcetag=s_pcqq_aiomsg - SASS用法指南
https://www.axihe.com/edu/sass/edu/interview-questions.html
http://www.ruanyifeng.com/blog/2012/06/sass.html - Compass用法指南
http://www.ruanyifeng.com/blog/2012/11/compass.html - 報錯
https://www.cnblogs.com/cjuan/p/9453438.html - sublime安裝插件：
- ctrl+shift+p（ctrl+P）
- 輸入install
- 輸入要安裝的插件名
- 自動生成css文件和.css.map文件 ：ctrl+shift+b(ctrl+B)
二虾攻、 ruby安裝
sass基于Ruby語言開發(fā)而成铡买，因此安裝sass前需要安裝Ruby。
ruby的下載地址：https://rubyinstaller.org/downloads/
- 第一步：同意協(xié)議：
- 第二步：添加環(huán)境變量
第三步：安裝完成之后跳出界面點擊finish
第四步：在彈出的命令行回車
第五步：檢測ruby是否安裝成功
第六步：在cmd輸入：ruby -v
輸出ruby的版本表示安裝成功
1．修改ruby的源
- 第一步：刪除原有的源
gem sources --remove https://rubygems.org/
- 第二步：添加國內(nèi)的源（淘寶的源已經(jīng)不再維護）
gem sources -a 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
//--style表示解析后的css是什么排版格式
- 編譯添加調(diào)試map
sass --watch input.scss:output.css --sourcemap
// --sourcemap表示開啟sourcemap調(diào)試塘慕。開啟sourcemap調(diào)試后，會生成一個后綴名為.css.map文件蒂胞。
//取消map
--sourcemap=none
//不生成緩存文件
--no--cache
- 選擇編譯格式并添加調(diào)試map
sass --watch input.scss:output.css --style expanded --sourcemap
- 開啟debug信息
sass --watch input.scss:output.css --debug-info
- sass內(nèi)置有四種編譯格式：nested
expandedcompact``compressed图呢。
四種編譯排版演示：
//未編譯樣式
.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
https://www.w3cschool.cn/tryrun/sass2css
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)以下情況摊鸡，則需要手動下載安裝。
下載地址：https://packagecontrol.io/installation
1.放到Sublime Text 3\Installed Packages目錄中蚕冬。
出現(xiàn)以下選項表示安裝成功：
2.接下來安裝sass：
重新打開sublime,Tools(工具) –>Command Palette(命令面板) 快捷鍵ctrl+shift+p免猾，并輸入install，選擇第一個Install Package囤热，在命令欄中輸入”Sass”然后回車猎提，然后在彈出的列表中選擇Sass插件，通過鼠標單擊或者回車進行安裝旁蔼，可通過左下角狀態(tài)欄查看安裝結(jié)果
同樣的方法忧侧，在命令欄中輸入”SassBuild”然后回車，然后在彈出的列表中選擇SassBuild插件牌芋，通過鼠標單擊或者回車進行安裝，可通過左下角狀態(tài)欄查看安裝結(jié)果
查看安裝的插件松逊，按ctrl+shift+p躺屁，輸入package，選擇list packages经宏，就看到了我們安裝的插件列表犀暑。如果你看到了sass和sass bulid就說明插件安裝成功了。安裝成功后一定要重啟sublime烁兰，不要在這里被坑。
3.有可能出現(xiàn)的情況：
4.解決辦法：
下載channel_v3.json 文件，放置到任意目錄桐磁，將地址寫入到配置項中刊橘。
5.使用sass編譯
- 創(chuàng)建編譯規(guī)則：
- 里面寫入以下內(nèi)容并在sublime text的user文件里創(chuàng)建一個sass文件（隨意命名），最后將以下內(nèi)容命名為mysass（隨意命名）保存到里面：
//第一個為創(chuàng)建的sass路徑
${file_path}/${file_base_name}.scss:
//第二個為生成的css路徑
${file_path}/css/${file_base_name}.css
//清除之前的設置：ctrl+shift+v
{
"cmd": ["sass", "--watch", "${file_path}/${file_name}:${file_path}/css/${file_base_name}.css","--style","expanded","--sourcemap=none","--no-cache"],
"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 */
6.sass編碼中文亂碼
CSS很好用…但是有一點不是很人性化的是,除了默認英文注釋.其他注釋需要設置相應的字符編碼才能正確解釋,否則報錯
1.在原生ruby配置的scss, 文件是支持@charset 'utf-8'的
@charset “utf-8”;
2.配置整個環(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;
}
建議大家使用scss文件后綴焕济。
2．sass的注釋
sass的注釋有兩種纷妆。
//單行注釋
/-------/ 多行注釋
3．sass變量
1) 變量的定義與使用
Sass的變量必須是$開頭，后面緊跟變量名吼蚁，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣）凭需。任何可以用作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;
}
5) 父選擇器（&）
在嵌套 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;
}
& 必須作為選擇器的第一個字符叶雹，其后可以跟隨后綴生成復合的選擇器。
/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 }
6) @at-root
//sass style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
@at-root {
@keyframes motion {
...
}
}
}
//css style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
}
@keyframes motion {
...
}
7) 子組合選擇器
article section { margin: 5px }
8) 同層組合選擇器：>、+和~
上邊這三個組合選擇器必須和其他選擇器配合使用式散，以指定瀏覽器僅選擇某種特定上下文中的元素筋遭。
可以用子組合選擇器>選擇一個元素的直接子元素。
可以用同層相鄰組合選擇器+選擇一個元素后緊跟的某一類元素
以用同層全體組合選擇器~暴拄，選擇所有跟在指定元素后的同層某類元素漓滔，不管它們之間隔了多少其他元素:
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//sass編譯后
article ~ 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ù)類型也有其各自支持的運算方式。
數(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具有條件語句怒坯，當 @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)重復輸出格式弄慰。類似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");
復雜對應each
//sass style
//-------------------------------
//$header:鍵
//$size:值
@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)自己在不停地重復一段樣式，那就應該把這段樣式構(gòu)造成優(yōu)良的混合器驴剔，尤其是這段樣式本身就是一個邏輯單元省古，比如說是一組放在一起有意義的屬性。判斷一組屬性是否應該組合成一個混合器丧失，一條經(jīng)驗法則就是你能否為這個混合器想出一個好的名字豺妓。
1) 不帶參數(shù)的簡單Mixin
混合指令（Mixin）用于定義可重復使用的樣式，可以直接把一整段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ù)應用更方便，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;
}
10．繼承（擴展）
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文件甩鳄，避免了以前在一些基礎的文件中預定義了很多基礎的樣式逞度，然后實際應用中不管是否使用了 @extend去繼承相應的樣式，都會解析出來所有的樣式妙啃。占位選擇器以 %標識定義档泽，通過 @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．文件導入
Sass的導入( @import)Sass文件規(guī)則和CSS的有所不同，編譯時會將 @import的scss文件合并進來只生成一個CSS文件燥滑。
但是如果你在Sass文件中導入css文件如 @import 'reset.css'渐北，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會合并到編譯后的文件中铭拧，而是以 @import方式存在赃蛛。
所有的Sass導入文件都可以忽略后綴名 .scss恃锉。一般來說基礎的文件命名方法以_開頭，如 _mixin.scss呕臂。這種文件在導入的時候可以不寫下劃線破托，可寫成 @import "mixin"。
//sass style
//-------------------------------
@import "reset.css"; // 導入css文件歧蒋，不會進行編譯土砂。
@import "a"; // 導入a.scss 文件，后綴省略
p{
background: #0982c1;
}
//css style
//-------------------------------
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
四疏尿、 Compass
Compass是一個強大的Sass框架,它的設計目標是順暢瘟芝、高效地裝扮互聯(lián)網(wǎng),使用它的人可寫出可維護性更高的樣式表。
Compass 七大模塊
Reset
Layout
CSS3
Helpers
Typography
Utilities
Browser
- Compass 核心模塊
Reset
Layout
@import "compass/reset"
@import "compass/layout"
1褥琐、Browser 模塊：
Browser 用來配置compass默認支持哪些瀏覽器,對于特定瀏覽器,默認支持到哪個版本.
Browser 中的配置一旦修改,將影響其余6個模塊的輸出,因為需要針對不同的瀏覽器做不同的適配.
2锌俱、reset模塊：
reset 是 compass 內(nèi)置的，如果我們想修改為 normalize敌呈。
- 命令行使用
gem install compass-normalize
- 然后在 config.rb 配置文件中添加
require 'compass-normalize'
- 然后在 scss 文件中
@import "normalize";
3贸宏、layout 模塊：
如果說 reset 模塊是 compass 中使用起來最簡單的模塊，那么磕洪，layout 模塊則是 compass 中使用率最低的模塊吭练。Layout 模塊用來實現(xiàn)頁面布局控制的。
4析显、CSS3模塊：
如果說 Layout 模塊是 compass 中使用率最低的模塊鲫咽，那么，CSS3 模塊肯定是主動使用率最高的模塊谷异。
CSS3 模塊主要用于提供跨瀏覽器的 CSS3 能力分尸。
5、Typography 模塊：
Typography 模塊主要用來修飾文本樣式歹嘹、垂直韻律等(Links箩绍、Lists、Text尺上、Vertical Rhythm)
6材蛛、Utilities 模塊：
Utilities 模塊是輔助工具類函數(shù)
7、helpers 模塊：
helpers 類里面多是函數(shù)怎抛，utilities 里面多是 mixin卑吭，包含：
Color : 顏色相關(guān)的工具集合
Print : 打印控制的集合
Tables : table樣式相關(guān)的集合(table model)
Geeneral : 通用的一般類的工具(跨瀏覽器的清除浮動)
Sprites : 精靈圖合圖相關(guān)的工具集合(重點)
創(chuàng)建一個Compass項目
確保電腦已經(jīng)安裝Ruby環(huán)境，并且安裝了Sass和Compass
compass create sample
compass命令
1马绝、compass編譯
- 進入創(chuàng)建項目的目錄
cd sass
- 在創(chuàng)建項目的目錄最后輸入
compass create sample
- 進入項目根目錄
cd sample
- 執(zhí)行編譯
compass compile
- 編譯輸出格式
--output-style compressed //輸出壓縮格式
注意：
- Compass只編譯發(fā)生變動的文件豆赏，如果你要重新編譯未變動的文件，需要使用--force參數(shù)。
compass compile --force
- 除了使用命令行參數(shù)河绽，還可以在配置文件config.rb中指定編譯模式。
output_style = :expanded
- config.rb的配置文件可以這樣設置唉窃，可以通過指定environment的值（:production或者:development）耙饰，智能判斷編譯模式。
# environment = :development // 開發(fā)環(huán)境：不壓縮
environment = :production // 線上環(huán)境：壓縮
output_style = (environment == :production) ? :compressed : :expanded
- 監(jiān)聽命令：
compass watch
2．使用Compass解決真實的CSS問題
1) 樣式重置
@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;
}
