? ? ? ?css預(yù)處理器賦予了css動(dòng)態(tài)語(yǔ)言的特性，如變量、函數(shù)、運(yùn)算、繼承、嵌套等，有助于更好地組織管理樣式文件，以及更高效地開(kāi)發(fā)項(xiàng)目。css預(yù)處理器可以更方便的維護(hù)和管理css代碼，讓整個(gè)網(wǎng)頁(yè)變得更加靈活可變。對(duì)于預(yù)處理器，廣泛使用的有l(wèi)ess和sass。在這不做對(duì)比，2者大同小異，sass基于Ruby語(yǔ)言編寫(xiě)，所以編譯sass文件需要Ruby環(huán)境。我們使用sass并不需要過(guò)多了解Ruby語(yǔ)言，只需要安裝Ruby環(huán)境即可，而less則主要是運(yùn)行在node環(huán)境下，功能語(yǔ)法有類似之處。本文主要介紹Ruby下sass的使用。

Ruby下載與安裝：

1、登錄http://rubyinstaller.org/

　　

2、點(diǎn)擊download后到這個(gè)頁(yè)面，64位windows電腦下載箭頭所指的版本即可

3、完了直接安裝

點(diǎn)擊finish后，就算安裝完了，我們還需要去命令行下檢測(cè)是否安裝成功，注意的是ruby的命令行而不是cmd下的命令行。

?打開(kāi)后進(jìn)入命令行：

緊接著在ruby下安裝sass：輸入指令gem install sass

輸入sass -v，后出現(xiàn)版本號(hào)，就算安裝成功了。

好了，下載安裝完成，環(huán)境算是搭建好了，關(guān)于語(yǔ)法跟相關(guān)指令下面介紹。

?sass的使用。

為了讓更多人能夠真正學(xué)會(huì)使用sass，我從新建文件開(kāi)始，一步一步演示。

1、我在桌面建了一個(gè)名叫sasstest的文件夾，里面新建了一個(gè)sass.scss后綴的文件。（新建文本文檔后，把名字后綴改成sass.scss）

?

這里說(shuō)明一下，為什么sass的后綴是scss？其實(shí)，sass有兩種語(yǔ)法形式。

首先是scss，也就是我們這個(gè)后綴形式的語(yǔ)法。這種格式在 CSS3 語(yǔ)法的基礎(chǔ)上進(jìn)行擴(kuò)展，這意味著每個(gè)CSS樣式表是一個(gè)同等的SCSS文件。此外，SCSS 也支持大多數(shù) CSS hacks 寫(xiě)法 以及瀏覽器專屬前綴語(yǔ)法，這種語(yǔ)法的樣式表文件需要以?.scss?作為拓展名。

另一種，也是最早的語(yǔ)法，被稱為縮進(jìn)語(yǔ)法。它提供了一種更加簡(jiǎn)介的方式來(lái)書(shū)寫(xiě)CSS。它使用縮進(jìn)而不是花括號(hào)來(lái)表示選擇器的嵌套，用換行而不是分號(hào)來(lái)分隔屬性，一些人認(rèn)為這樣做比 SCSS 更容易閱讀，書(shū)寫(xiě)也更快速。縮排語(yǔ)法具有 Sass 的所有特色功能， 雖然有些語(yǔ)法上稍有差異。 使用此種語(yǔ)法的樣式表文件需要以?.sass?作為擴(kuò)展名。

其實(shí)不管哪種語(yǔ)法，任何一種語(yǔ)法的文件可以直接導(dǎo)入?到另一種語(yǔ)法的文件中使用，同時(shí)還可以通過(guò)sass-convert 命令行工具，進(jìn)行互相轉(zhuǎn)換。

我感覺(jué)不用糾結(jié)這些差異，使用一種即可，我習(xí)慣第一種，所以本文一直使用scss的語(yǔ)法形式。

2、第二步當(dāng)然就是打開(kāi)sass.scss啦。用什么編輯器都行，本文使用sublime text。

要想運(yùn)行sass，就要使用到指令了，好了，先別管語(yǔ)法，在sass.scss中敲上幾行，看能不能編譯成css，提前了解下指令。

?

敲上去之后呢，查看新建的文件夾，你會(huì)發(fā)現(xiàn)什么都沒(méi)有，還是老樣

當(dāng)然啦，你還沒(méi)監(jiān)測(cè)運(yùn)行你的sass代碼怎么會(huì)有變化呢？還記得ruby的命令行窗口嗎？是的，需要在那里敲上運(yùn)行的指令，sass才能生成css代碼。

運(yùn)行sass文件：sass input.scss output.css (左邊代表sass輸入文件，右邊是css輸出文件)

sass監(jiān)視sass文件的指令有：

所謂監(jiān)視，就是每當(dāng)sass文件發(fā)生改變時(shí)，css文件隨之生成。這點(diǎn)與運(yùn)行不同，運(yùn)行時(shí)一次性的，監(jiān)視是持續(xù)性的。

監(jiān)視某一個(gè)sass文件：sass --watch input.scss:output.css(左邊代表sass輸入文件，右邊是css輸出文件)

監(jiān)視整個(gè)文件夾：sass --watch sass:css(左邊代表監(jiān)視的文件夾路徑，右邊代表輸出文件夾路徑)

那么，跑一邊我們的scss代碼，看看生成的css，我想要的是在sasstest文件夾下面生成一個(gè)css文件夾，存放css文件，方便管理。

1）找到當(dāng)前文件夾。由于是桌面，所以路徑如下

注意，如果跨盤(pán)，直接這樣進(jìn)入某盤(pán)：

按照上面3種，寫(xiě)對(duì)應(yīng)的指令。

2）運(yùn)行：運(yùn)行的時(shí)候，沒(méi)能生成css文件夾，這時(shí)需要手動(dòng)增加css文件夾。

本例子指令：

說(shuō)明：首先進(jìn)入sasstest文件夾，然后敲指令。

結(jié)果圖：

第一個(gè)是生成的緩存文件，打開(kāi)是css，會(huì)看到，

除了css，還有一個(gè)map文件，sass文件相當(dāng)于源文件，css相當(dāng)于編譯后的文件，當(dāng)檢查到頁(yè)面問(wèn)題的時(shí)候，你看到的是css，但是需要修改的是sass文件，這個(gè)map就是兩個(gè)文件的對(duì)應(yīng)關(guān)系表。

分別打開(kāi)2個(gè)文件：

??

可以看到css出來(lái)了，而那個(gè)文件只是對(duì)應(yīng)關(guān)系表，不用管它。

3）監(jiān)視文件。我們恢復(fù)文件夾初始狀態(tài)，如圖：

監(jiān)視sass.scss一個(gè)文件sass --watch sass.scss:css\sass.css，監(jiān)視會(huì)生成對(duì)應(yīng)的文件夾，不用手動(dòng)創(chuàng)建。（注意，這樣只能監(jiān)視一個(gè)文件，就是sass.scss，如果sasstest下還有其他sass文件，則監(jiān)視不了）

效果是一樣的：

我們有恢復(fù)文件夾初始狀態(tài)，把生成的刪去，試一下監(jiān)視文件夾的指令，其實(shí)用的更多的還是監(jiān)視文件夾

要監(jiān)視文件夾，路徑需要回到文件夾的上一級(jí)，本文中就是桌面了。

好了，關(guān)于運(yùn)行就介紹到這里了。

關(guān)于css輸出格式，sass提供了四種：nested、expanded、compact、compressed。

指令寫(xiě)法：

nested：nested（嵌套）格式是 Sass 默認(rèn)的輸出格式，因?yàn)樗母袷椒从矯SS樣式與HTML文檔結(jié)構(gòu)。每個(gè)屬性都獨(dú)占用一行，但縮排不是固定的。每個(gè)規(guī)則是基于它的何嵌套深度縮進(jìn)。

expanded：expanded（擴(kuò)展）格式更像是手寫(xiě)的CSS樣式，每個(gè)屬性和規(guī)則都獨(dú)占用一行。在規(guī)則之內(nèi)的屬性縮進(jìn)的，但規(guī)則沒(méi)有任何特殊的縮進(jìn)。

compact：compact（緊湊）格式比起nested（嵌套）或expanded（擴(kuò)展）格式占據(jù)更小的空間。這種格式重點(diǎn)聚焦在選擇器上，不是它們的屬性。每個(gè)CSS規(guī)則獨(dú)占用一行，該行還包括定義的每個(gè)屬性。嵌套的規(guī)則都是另起一行，不嵌套的選擇器會(huì)輸出空白行作為分隔符。

compressed：compressed（壓縮）格式占用盡可能小的空間，在該文件的末尾會(huì)有一個(gè)換行，并且除了必要的分隔選擇器之外，基本沒(méi)有多余空格，它還包括其他一些小的壓縮，比如選擇顏色最小的表示方式。這意味著可讀性很差。

sass的語(yǔ)法：

時(shí)間有限，我貼一下我練習(xí)是使用到的語(yǔ)法代碼：

?

@charset "utf-8"; /* * CSS擴(kuò)展 */ /*嵌套規(guī)則*/ #main{width:100px;p, div{font-size:2em;a{font-weight: bold;}} } /*引用父選擇器*/ a{text-decoration: none;font-weight: lighter;&:hover{text-decoration:underline;font-weight: bolder;}body.firefox &{color:red;} } #main{color:red;a{font-size: 20px;&:hover{color:blue;}} } /*嵌套屬性*/ .fun{font:{family:"微軟雅黑";size:16px;weight:bolder;} } /* 占位符選擇器: %foo Sass 支持一種特殊類型的選擇器,叫做"占位符選擇器" ](placeholder selector)。這些看起來(lái)像 class 和 id 選擇器，除了# 或.用%替換。他們需要在@extend 指令中使用; */ /* * Sassscript */ /* 交互式 shell */ /* Interactive Shell 可以在命令行中測(cè)試 SassScript 的功能。 在命令行中輸入 sass -i，然后輸入想要測(cè)試的 SassScript 查看輸出結(jié)果： sass -i >> "Hello, Sassy World!" "Hello, Sassy World!" >> 1px + 1px + 1px 3px >> #777 + #777 #eeeeee >> #777 + #888 white */ /*變量：變量?jī)H在它定義的選擇器嵌套層級(jí)的范圍內(nèi)可用（愚人碼頭注：可以理解為塊級(jí)作用域）。不在任何嵌套選擇器內(nèi)定義的變量則在可任何地方使用（愚人碼頭注：可以理解為全局變量）。定義變量的時(shí)候可以后面帶上!global標(biāo)志，在這種情況下，變量在任何地方可見(jiàn)（愚人碼頭注：可以理解為全局變量）*/#bod{$width:100px !global;width:$width;}#ref{width:$width;} /* 數(shù)據(jù)類型：SassScript 支持 7 種主要的數(shù)據(jù)類型 數(shù)字、文本字符串、顏色、布爾值、空值、值列表 (list)、maps */ @mixin firefox-message($select){body #{$select}:before{color:red;content: "hi";} } @include firefox-message(".header"); /* 插值 */ $name : son; $color :blue; p.#{$name}{color:#{color}; } /* SassScript中的& 就像當(dāng)它在選擇器中使用一樣，SassScript中的&指向 當(dāng)前父選擇器。下面是一個(gè)逗號(hào)分隔的列表（list） 中包含一個(gè)空格的分隔列表（list） */ @mixin does-parent-exist {@if & {&:hover {color: red;}} @else {a {color: red;}} } @include does-parent-exist; /* 變量默認(rèn): !default 如果分配給變量的值后面添加了!default標(biāo)志 ，這意味著該變量如果已經(jīng)賦值，那么它不會(huì)被重新賦值，但是，如果它尚未賦值，那么它會(huì)被賦予新的給定值。 */ $content: "Second content?" !default; $content: "First content"; $new_content: "First time reference" !default;#main {content: $content;new-content: $new_content; } /* @media */ .silder{width: 300px;@media screen and (max-width: 500px) {width:500px;} } $media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5;@media #{$media} and ($feature: $value) {.sidebar {width: 500px;} } /* @extend */ .error{border: 1px #f00;background-color: #fdd; } .seriousError{@extend .error;border-width: 3px; } #fake-links .link {@extend a.class;font-size: 18px; } a.class{color:blue;&:hover{color:red;} } /* @extend-Only 選擇器 占位選擇器看起來(lái)很像普通的 class 和 id 選擇器， 只是 # 或 . 被替換成了 %。他可以像 class 或者id 選擇器那樣使用，而它本身的規(guī)則，不會(huì)被編譯到 CSS 文件中，如下 */ #context a%extreme {color: blue;font-weight: bold;font-size: 2em; } /* 占位符選擇器，就像class和id選擇器那樣可以用于擴(kuò)展。 擴(kuò)展選擇器，將會(huì)編譯成CSS，占位符選擇器本身不會(huì)被 編譯。例如： */ .notice {@extend %extreme; } /* !optional 標(biāo)記:主要是避免擴(kuò)展時(shí)如果沒(méi)有某個(gè)選擇器，會(huì)報(bào)錯(cuò) */ a.important {@extend .noticeqq !optional; } /* * *控制指令和表達(dá)式 * */ /*@if 語(yǔ)法*/ $type : monster; p{@if $type == ocean {color: red;} @else if $type == matator{color: blue;} @else if $type == monster{color: green;} @else {color: black;} } /*@for 語(yǔ)法*/ /* @for指令重復(fù)輸出一組樣式。對(duì)于每次重復(fù)，計(jì)數(shù)器變量用于 調(diào)整輸出結(jié)果。該指令有兩種形式：@for $var from <start> through <end> 和 @for $var from <start> to <end>。注意 關(guān)鍵字through 和 to的區(qū)別。$var可以是任何變量名，比如$i; <start> 和 <end>是應(yīng)該返回整數(shù)的SassScript表達(dá)式。當(dāng) <start>比<end>大的時(shí)候，計(jì)數(shù)器將遞減，而不是增量。@for語(yǔ)句將設(shè)置$var為指定的范圍內(nèi)每個(gè)連續(xù)的數(shù)值，并且每 一次輸出的嵌套樣式中使用$var的值。對(duì)于from ... through 的形式，范圍包括<start>和<end>的值，但from ... to的形式 從<start>開(kāi)始運(yùn)行，但不包括<end>的值。 */ @for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; } } @for $i from 5 to 3 {.item-#{$i} { width: 2em * $i; } } /*@each @each指令通常格式是@each $var in <list or map>。$var可以 是任何變量名，像$length 或者 $name，和<list or map>是一 個(gè)返回列表（list）或 map 的 SassScript 表達(dá)式。@each 規(guī)則將$var設(shè)置為列表（list）或 map 中的每個(gè)項(xiàng)目， 輸出樣式中包含使用$var的值 */ @each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');} } /*多重賦值*/ @each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move) {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');border: 2px solid $color;cursor: $cursor;} } @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {font-size: $size;} } /* @while 指令重復(fù)輸出嵌套樣式，直到SassScript表達(dá)式返回結(jié)果 為false。這可用于實(shí)現(xiàn)比@for語(yǔ)句更復(fù)雜的循環(huán) */ $i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2; } /* * *混入指令 * */ /* 混入(mixin)允許定義可以在整個(gè)樣式表中重復(fù)使用的樣式， 而避免了使用無(wú)語(yǔ)意的類（class），比如 .float-left。 混入(mixin)還可以包含所有的CSS規(guī)則，以及任何其他在Sass 文檔中被允許使用的東西。他們甚至可以帶arguments，引入變 量，只需少量的混入(mixin)代碼就能輸出多樣化的樣式。 */ /*1、定義一個(gè)混入(mixin):@mixin*/ @mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000; } /*2、引入混合樣式：@include*/ .page-title {@include large-text;padding: 4px;margin-top: 10px; } /* 混入（mixin）也可以包含在任何規(guī)則的外（即，在文檔的根）, 只要它們不直接定義的任何屬性或使用任何父選擇器引用 */ @mixin silly-links {a {color: blue;background-color: red;} } @include silly-links; /*帶參數(shù)*/ @mixin sexy-border($color, $width: 1in) {border: {color: $color;width: $width;style: dashed;} } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }

?下面是一個(gè)按鈕樣式制作例子：

.button-narmol{position: relative;margin-left: auto;margin-right: auto;box-sizing: border-box;text-align: center;text-decoration: none;color: #FFFFFF;border-radius: 3px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);overflow: hidden;cursor:pointer;&:after{content: " ";width: 200%;height: 200%;position: absolute;top: 0;left: 0;border: 1px solid rgba(0, 0, 0, 0.2);-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0;box-sizing: border-box;border-radius: 10px;} } @mixin button-style-block($select,$color,$darken){#{$select}{display: block;padding-left: 14px;padding-right: 14px;font-size: 16px;line-height: 2.55555556;background-color: darken($color,$darken);@extend .button-narmol;&:active{background-color: darken($color,$darken+10%);}} } @mixin button-style-inline-block($select,$color,$darken){#{$select}{background-color: darken($color,$darken);display: inline-block;padding: 0 1.32em;line-height: 2.3;font-size: 13px;@extend .button-narmol;&:active{background-color: darken($color,$darken+10%);}} } @include button-style-block(".krui-btn_primary",#1AAD19,10%); @include button-style-block(".krui-btn_error",#E64340,0%); @include button-style-inline-block(".krui-btn_primary-small",#1AAD19,0%);

只要在html中調(diào)用即可。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>button</title><link rel="stylesheet" href="css/button.css"><style type="text/css">span{margin-bottom: 20px;}</style> </head> <body><span class="krui-btn_primary">登錄</span><span class="krui-btn_primary-small">登錄</span><span class="krui-btn_primary-small">登錄</span><span class="krui-btn_primary-small">登錄</span><span class="krui-btn_primary-small">登錄</span><span class="krui-btn_error">登錄</span><span class="krui-btn_primary">登錄</span><span class="krui-btn_primary">登錄</span> </body> </html>?

?

補(bǔ)充：1、不生成緩存

2、編譯中文出現(xiàn)類似Syntax error: Invalid GBK character “\xE5″的錯(cuò)誤解決方法：

找到這個(gè)文件，在require.XXX后面添加一行代碼：Encoding.default_external = Encoding.find('utf-8')

如果還不行，檢查一下文件夾名和文件名是否用了中文，改英文試試？

上班期間偷偷花了好多時(shí)間寫(xiě)了本文，希望對(duì)大家有用，另外也請(qǐng)尊重下原創(chuàng)，轉(zhuǎn)載寫(xiě)明出處。-------博客園.我是水魚(yú)

sass中文文檔：http://www.css88.com/doc/sass/

后續(xù)補(bǔ)充：

最近換系統(tǒng)，換了win10，需要重裝sass，待我裝完ruby，安裝sass時(shí)出現(xiàn)問(wèn)題，如下：

原因：ruby證書(shū)不對(duì)。

解決方法：

1、打開(kāi)http://curl.haxx.se/cs/cscert.pem，下載證書(shū)并保存為cscert.pem文件（Ctrl+s保存為即可）。

2、將cscert.pem放在Ruby23-x64目錄下（其實(shí)放哪都無(wú)所謂）

3、設(shè)置環(huán)境變量中的系統(tǒng)變量（修改環(huán)境變量的方法不了解的可以百度一下）

4、重開(kāi)一次ruby，再次下載，成功如下

轉(zhuǎn)載于:https://www.cnblogs.com/wuzhiquan/p/5912146.html

總結(jié)

以上是生活随笔為你收集整理的css预处理器sass使用教程(多图预警)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。