一、ruby安裝
sass基于Ruby語(yǔ)言開(kāi)發(fā)而成，因此安裝sass前需要安Ruby。
ruby的下載地址：[https://rubyinstaller.org/downloads/]
第一步：同意協(xié)議：
![]()
第二步：添加環(huán)境變量
![]()
第三步：安裝完成之后跳出界面點(diǎn)擊finish
第四步：在彈出的命令行回車
第五步：檢測(cè)ruby是否安裝成功
在cmd輸入：
ruby -v
輸出ruby的版本表示安裝成功
1．修改ruby的源
第一步：刪除原有的源
gem sources --remove https://rubygems.org
第二步：添加國(guó)內(nèi)的源（淘寶的源已經(jīng)不再維護(hù)）
gem sources -a https://gems.ruby-china.com
第三部：檢測(cè)是否換源成功
gem sources -l
輸出地址一致表示換源成功。
2．安裝sass
gem install sass
3．檢測(cè)sass安裝是否成功
sass -v
4．安裝compass
gem install compass
5．檢測(cè)compass是否安裝成功
compass -v
6．其他命令
更新sass
gem update sass
查看sass幫助
sass -h
7．sass的編譯
/單文件轉(zhuǎn)換命令
sass input.scss output.css
//單文件監(jiān)聽(tīng)命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目錄，你也可以告訴sass監(jiān)聽(tīng)整個(gè)目錄：
sass --watch app/sass:public/stylesheets
8．sass的編譯參數(shù)
命令行編譯sass有配置選項(xiàng)，如編譯過(guò)后css排版、生成調(diào)試map、開(kāi)啟debug信息等，可通過(guò)使用命令sass -v查看詳細(xì)。我們一般常用兩種--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
//開(kāi)啟debug信息
sass --watch input.scss:output.css --debug-info
--style表示解析后的css是什么排版格式;
sass內(nèi)置有四種編譯格式:nested、expanded、compact、compressed。
--sourcemap表示開(kāi)啟sourcemap調(diào)試。開(kāi)啟sourcemap調(diào)試后，會(huì)生成一個(gè)后綴名為.css.map文件。
四種編譯排版演示：
未編譯樣式
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
nested 編譯排版格式
命令行內(nèi)容
sass style.scss:style.css --style nested
編譯過(guò)后樣式
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 編譯排版格式
命令行內(nèi)容
sass style.scss:style.css --style expanded
編譯過(guò)后樣式
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 編譯排版格式
命令行內(nèi)容
sass style.scss:style.css --style compact
編譯過(guò)后樣式
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 編譯排版格式
命令行內(nèi)容
sass style.scss:style.css --style compressed
編譯過(guò)后樣式
.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選項(xiàng)下有沒(méi)有package control這個(gè)選項(xiàng)，如果沒(méi)有的話，就表示你沒(méi)有Package Control 插件（一個(gè)方便 Sublime text 管理插件的插件），這時(shí)，你就要從菜單 View - Show Console 或者 ctrl + ~ 快捷鍵，調(diào)出 console。將以下 Python 代碼粘貼進(jìn)去并 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)以下情況，則需要手動(dòng)下載安裝。
出現(xiàn)以下選項(xiàng)表示安裝成功：
接下來(lái)安裝sass：
重新打開(kāi)sublime,Tools(工具) –>Command Palette(命令面板) 快捷鍵ctrl+shift+p，并輸入install，選擇第一個(gè)Install Pacage，在命令欄中輸入”Sass”然后回車，然后在彈出的列表中選擇Sass插件，通過(guò)鼠標(biāo)單擊或者回車進(jìn)行安裝，可通過(guò)左下角狀態(tài)欄查看安裝結(jié)果
同樣的方法，在命令欄中輸入”SassBuild”然后回車，然后在彈出的列表中選擇SassBuild插件，通過(guò)鼠標(biāo)單擊或者回車進(jìn)行安裝，可通過(guò)左下角狀態(tài)欄查看安裝結(jié)果
查看安裝的插件，按ctrl+shift+p，輸入package，選擇list packages，就看到了我們安裝的插件列表。如果你看到了sass和sass bulid就說(shuō)明插件安裝成功了。安裝成功后一定要重啟sublime，不要在這里被坑。
有可能出現(xiàn)的情況：
解決辦法：
使用sass編譯。
創(chuàng)建編譯規(guī)則：
里面寫(xiě)入以下內(nèi)容：
{
"cmd": ["sass", "--watch", "${file_path}/${file_base_name}.scss:${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"
}
}
//${file_base_name} 是否生成scss后綴名（1.scss.css）
//--sourcemap=none 不生成.map文件（1.map）
//--no-cache 不生成文件夾（.sass-cache）
//想要.scss和.sass文件都能執(zhí)行就修改下面的代碼
"cmd": ["sass", "--watch", "${file_path}/${file_name}:${file_path}/css/${file_base_name}.css","--style","expanded","--sourcemap=none","--no-cache"]
書(shū)寫(xiě)scss文件：
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
進(jìn)行編譯：Ctrl+B進(jìn)行編譯。
生成的css：
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
/*# sourceMappingURL=t.css.map */
12．sass編碼中文亂碼
CSS很好用…但是有一點(diǎn)不是很人性化的是,除了默認(rèn)英文注釋.其他注釋需要設(shè)置相應(yīng)的字符編碼才能正確解釋,否則報(bào)錯(cuò)
1.在原生ruby配置的scss, 文件是支持@charset 'utf-8'的
@charset “utf-8”;
2.配置整個(gè)環(huán)境
找到ruby的安裝目錄，里面也有sass模塊，如這個(gè)路徑：
C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在這個(gè)文件里面engine.rb，添加一行代碼
Encoding.default_external = Encoding.find(‘utf-8’)
放在所有的require XXXX 之后即可。
二、SASS語(yǔ)法
1．sass的格式
sass有兩種后綴名文件：一種后綴名為sass，語(yǔ)法要求不使用大括號(hào)和分號(hào)；另一種就是我們這里使用的scss文件，這種和我們平時(shí)寫(xiě)的CSS文件格式差不多，使用大括號(hào)和分號(hào)。
文件后綴名為sass的語(yǔ)法
body
background: #eee
font-size:12px
p
background: #0982c1
文件后綴名為scss的語(yǔ)法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
建議大家使用scss文件后綴。
2．sass的注釋
sass的注釋有兩種。
//單行注釋
/*-------*/ 多行注釋
3．sass變量
1)變量的定義與使用
Sass的變量必須是$開(kāi)頭，后面緊跟變量名，而變量值和變量名之間就需要使用冒號(hào)(:)分隔開(kāi)（就像CSS屬性設(shè)置一樣）。任何可以用作css屬性值的賦值都可以用作sass的變量值，甚至是以空格分割的多個(gè)屬性值，或者以逗號(hào)分割的多個(gè)屬性值。
$a-color: blue; // 定義變量。
.box {
color: $a-color; // => blue 使用變量
}
2)局部變量與全局變量
變量支持塊級(jí)作用域，嵌套規(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)容是互通的，除了變量，也包括對(duì)混合器和Sass函數(shù)的命名。但是在sass中純css部分不互通，比如類名、ID或?qū)傩悦?/p>
$link-color: blue;
a {
color: $link_color;
}
//編譯后
a {
color: blue;
}
4．嵌套
1)嵌套規(guī)則
Sass 允許將一套 CSS 樣式嵌套進(jìn)另一套樣式中，內(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ī)則時(shí)，有時(shí)也需要直接使用嵌套外層的父選擇器，可以用 & 代表嵌套規(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;
}
& 必須作為選擇器的第一個(gè)字符，其后可以跟隨后綴生成復(fù)合的選擇器。
/sass style
//-------------------------------
#main {
color: black;
&-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
父選擇器標(biāo)識(shí)符還有另外一種用法，你可以在父選擇器之前添加選擇器。
#content aside {
color: red;
body.ie & { color: green }
}
/*編譯后*/
#content aside {color: red};
body.ie #content aside { color: green }
3)@at-root
@at-root用來(lái)跳出當(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)同層組合選擇器：>、+和~
上邊這三個(gè)組合選擇器必須和其他選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素。
可以用子組合選擇器>選擇一個(gè)元素的直接子元素。
可以用同層相鄰組合選擇器+選擇一個(gè)元素后緊跟的某一類元素
以用同層全體組合選擇器~，選擇所有跟在指定元素后的同層某類元素，不管它們之間隔了多少其他元素:
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．運(yùn)算
Sass支持多種數(shù)據(jù)類型的變量，比如：
數(shù)字，1, 2, 13, 10px
字符串，有引號(hào)字符串與無(wú)引號(hào)字符串，"foo", 'bar', baz
顏色，blue, #04a3f9, rgba(255,0,0,0.5)
布爾型，true, false
空值，null
所有數(shù)據(jù)類型均支持相等運(yùn)算 == 或 !=，此外，每種數(shù)據(jù)類型也有其各自支持的運(yùn)算方式。
1)數(shù)值運(yùn)算
Sass支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算 (+, -, *, /, %)，如果必要會(huì)在不同單位間轉(zhuǎn)換值。
//sass style
//-------------------------------
.box {
height: 17px + 20px; // => 37px 數(shù)字加法運(yùn)算
width: (75rem/16); // => 4.6875rem 除法運(yùn)算
color: #303030*2; // => #606060; 乘法運(yùn)算（顏色運(yùn)算）
padding: 20px - 3; // => 17pex 數(shù)字減法
font-family: sans- + "serif"; // => sans-serif 字符串加法
width: 1em + (2em * 3); // 帶括號(hào)的運(yùn)算
}
//css style
//-------------------------------
.box {
height: 37px;
width: 4.6875rem;
color: #606060;
padding: 17px;
font-family: sans-serif;
width: 7em;
}
6．條件語(yǔ)句
sass具有條件語(yǔ)句，當(dāng) @if 的表達(dá)式返回值不是 false 或者 null 時(shí)，條件成立，輸出 {} 內(nèi)的代碼。
//sass style
//-------------------------------
$w: 960px;
$type: monster;
.box {
@if 2*3 > 5 { // 簡(jiǎn)單if判斷語(yǔ)句
color: red;
}
@if $w > 900px {
width: $w;
} @else { // if else 語(yǔ)句
width: 900px;
}
@if $type == ocean { // 多個(gè)if和else語(yǔ)句
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;
}
說(shuō)明：@if 聲明后面可以跟多個(gè) @else if 聲明，或者一個(gè) @else 聲明。
如果 @if 聲明失敗，Sass 將逐條執(zhí)行 @else if 聲明，如果全部失敗，最后執(zhí)行 @else 聲明
7．循環(huán)語(yǔ)句
@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 in <list>,
$var 可以是任何變量名，比如 $length 或者 $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ù)雜對(duì)應(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)良的混合器，尤其是這段樣式本身就是一個(gè)邏輯單元，比如說(shuō)是一組放在一起有意義的屬性。判斷一組屬性是否應(yīng)該組合成一個(gè)混合器，一條經(jīng)驗(yàn)法則就是你能否為這個(gè)混合器想出一個(gè)好的名字。
1)不帶參數(shù)的簡(jiǎn)單Mixin
混合指令（Mixin）用于定義可重復(fù)使用的樣式，可以直接把一整段Sass代碼替換到某個(gè)地方去。
//sass style
//-------------------------------
// 定義mixin reset, 用@mixin開(kāi)頭，后面跟空格和混合塊的名字。然后是語(yǔ)句塊
@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)默認(rèn)參數(shù)的mixin
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
4)函數(shù)指令
雖然Mixin功能強(qiáng)大，但是某些場(chǎng)景下還是函數(shù)應(yīng)用更方便，Sass也提供了自定義函數(shù)的用法
//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;
// 定義自定義函數(shù) grid-width
@function grid-width($n) { // 接受一個(gè)參數(shù)$n
@return $n * $grid-width + ($n - 1) * $gutter-width; // 返回值。
}
#sidebar { width: grid-width(5); } // 在屬性中調(diào)用函數(shù)
//css style
//-------------------------------
#sidebar {
width: 240px;
}
10．繼承（擴(kuò)展）
1)基本繼承
sass中，選擇器繼承可以讓選擇器繼承另一個(gè)選擇器的所有樣式，并聯(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)勢(shì)在于：如果不調(diào)用則不會(huì)有任何多余的css文件，避免了以前在一些基礎(chǔ)的文件中預(yù)定義了很多基礎(chǔ)的樣式，然后實(shí)際應(yīng)用中不管是否使用了 @extend去繼承相應(yīng)的樣式，都會(huì)解析出來(lái)所有的樣式。占位選擇器以 %標(biāo)識(shí)定義，通過(guò) @extend調(diào)用。
//sass style
//-------------------------------
%ir { // 定義占位符。沒(méi)有選擇器名字的一段代碼而已。
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的有所不同，編譯時(shí)會(huì)將 @import的scss文件合并進(jìn)來(lái)只生成一個(gè)CSS文件。
但是如果你在Sass文件中導(dǎo)入css文件如 @import 'reset.css'，那效果跟普通CSS導(dǎo)入樣式文件一樣，導(dǎo)入的css文件不會(huì)合并到編譯后的文件中，而是以 @import方式存在。
所有的Sass導(dǎo)入文件都可以忽略后綴名 .scss。一般來(lái)說(shuō)基礎(chǔ)的文件命名方法以_開(kāi)頭，如 _mixin.scss。這種文件在導(dǎo)入的時(shí)候可以不寫(xiě)下劃線，可寫(xiě)成 @import "mixin"。
//sass style
//-------------------------------
@import "reset.css"; // 導(dǎo)入css文件，不會(huì)進(jìn)行編譯。
@import "a"; // 導(dǎo)入a.scss 文件，后綴省略
p{
background: #0982c1;
}
//css style
//-------------------------------
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
