css預處理器sass使用教程(多圖預警)

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

Ruby下載與安裝：

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

2、點擊download后到這個頁面，64位windows電腦下載箭頭所指的版本即可

3、完了直接安裝

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

?打開后進入命令行：

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

輸入sass -v，后出現版本號，就算安裝成功了。

好了，下載安裝完成，環境算是搭建好了，關于語法跟相關指令下面介紹。

?sass的使用。

為了讓更多人能夠真正學會使用sass，我從新建文件開始，一步一步演示。

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

這里說明一下，為什么sass的后綴是scss？其實，sass有兩種語法形式。

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

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

其實不管哪種語法，任何一種語法的文件可以直接導入?到另一種語法的文件中使用，同時還可以通過sass-convert 命令行工具，進行互相轉換。

我感覺不用糾結這些差異，使用一種即可，我習慣第一種，所以本文一直使用scss的語法形式。

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

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

敲上去之后呢，查看新建的文件夾，你會發現什么都沒有，還是老樣

當然啦，你還沒監測運行你的sass代碼怎么會有變化呢？還記得ruby的命令行窗口嗎？是的，需要在那里敲上運行的指令，sass才能生成css代碼。

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

sass監視sass文件的指令有：

所謂監視，就是每當sass文件發生改變時，css文件隨之生成。這點與運行不同，運行時一次性的，監視是持續性的。

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

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

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

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

注意，如果跨盤，直接這樣進入某盤：

按照上面3種，寫對應的指令。

2）運行：運行的時候，沒能生成css文件夾，這時需要手動增加css文件夾。

本例子指令：

說明：首先進入sasstest文件夾，然后敲指令。

結果圖：

第一個是生成的緩存文件，打開是css，會看到，

除了css，還有一個map文件，sass文件相當于源文件，css相當于編譯后的文件，當檢查到頁面問題的時候，你看到的是css，但是需要修改的是sass文件，這個map就是兩個文件的對應關系表。

分別打開2個文件：

可以看到css出來了，而那個文件只是對應關系表，不用管它。

3）監視文件。我們恢復文件夾初始狀態，如圖：

監視sass.scss一個文件sass --watch sass.scss:css\sass.css，監視會生成對應的文件夾，不用手動創建。（注意，這樣只能監視一個文件，就是sass.scss，如果sasstest下還有其他sass文件，則監視不了）

效果是一樣的：

我們有恢復文件夾初始狀態，把生成的刪去，試一下監視文件夾的指令，其實用的更多的還是監視文件夾

要監視文件夾，路徑需要回到文件夾的上一級，本文中就是桌面了。

好了，關于運行就介紹到這里了。

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

指令寫法：

nested：nested（嵌套）格式是 Sass 默認的輸出格式，因為它的格式反映CSS樣式與HTML文檔結構。每個屬性都獨占用一行，但縮排不是固定的。每個規則是基于它的何嵌套深度縮進。

expanded：expanded（擴展）格式更像是手寫的CSS樣式，每個屬性和規則都獨占用一行。在規則之內的屬性縮進的，但規則沒有任何特殊的縮進。

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

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

sass的語法：

時間有限，我貼一下我練習是使用到的語法代碼：

@charset "utf-8";
/*
* CSS擴展
*/
/*嵌套規則*/
#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)。這些看起來像 class 和 id 
選擇器，除了# 或.用%替換。他們需要在@extend 指令中使用;
*/
/*
*  Sassscript
*/
/* 交互式 shell */
/*
Interactive Shell 可以在命令行中測試 SassScript 的功能。
在命令行中輸入 sass -i，然后輸入想要測試的 SassScript 
查看輸出結果：
sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
*/
/*變量：變量僅在它定義的選擇器嵌套層級的范圍內可用（愚人碼頭注：可以理解為塊級作用域）。不在任何嵌套選擇器內定義的變量則在可任何地方使用（愚人碼頭注：可以理解為全局變量）。定義變量的時候可以后面帶上!global標志，在這種情況下，變量在任何地方可見（愚人碼頭注：可以理解為全局變量）*/#bod{$width:100px !global;width:$width;}#ref{width:$width;}
/*
數據類型：SassScript 支持 7 種主要的數據類型
數字、文本字符串、顏色、布爾值、空值、值列表 (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中的& 
就像當它在選擇器中使用一樣，SassScript中的&指向
當前父選擇器。下面是一個逗號分隔的列表（list）
中包含一個空格的分隔列表（list）
*/
@mixin does-parent-exist {@if & {&:hover {color: red;}} @else {a {color: red;}}
}
@include does-parent-exist;
/* 變量默認: !default 如果分配給變量的值后面添加了!default標志 ，這意味著該變量如果已經賦值，那么它不會被重新賦值，但是，如果它尚未賦值，那么它會被賦予新的給定值。
*/
$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 選擇器
占位選擇器看起來很像普通的 class 和 id 選擇器，
只是 # 或 . 被替換成了 %。他可以像 class 或者id 選擇器那樣使用，而它本身的規則，不會被編譯到 CSS 文件中，如下
*/
#context a%extreme {color: blue;font-weight: bold;font-size: 2em;
}
/*
占位符選擇器，就像class和id選擇器那樣可以用于擴展。
擴展選擇器，將會編譯成CSS，占位符選擇器本身不會被
編譯。例如：
*/
.notice {@extend %extreme;
}
/*
!optional 標記:主要是避免擴展時如果沒有某個選擇器，會報錯
*/
a.important {@extend .noticeqq !optional;
}
/*
*
*控制指令和表達式
*
*/
/*@if 語法*/
$type : monster;
p{@if $type == ocean {color: red;} @else if $type == matator{color: blue;} @else if $type == monster{color: green;} @else {color: black;}
}
/*@for 語法*/
/*
@for指令重復輸出一組樣式。對于每次重復，計數器變量用于
調整輸出結果。該指令有兩種形式：@for $var from <start> 
through <end> 和 @for $var from <start> to <end>。注意
關鍵字through 和 to的區別。$var可以是任何變量名，比如$i;
<start> 和 <end>是應該返回整數的SassScript表達式。當
<start>比<end>大的時候，計數器將遞減，而不是增量。@for語句將設置$var為指定的范圍內每個連續的數值，并且每
一次輸出的嵌套樣式中使用$var的值。對于from ... through
的形式，范圍包括<start>和<end>的值，但from ... to的形式
從<start>開始運行，但不包括<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>是一
個返回列表（list）或 map 的 SassScript 表達式。@each 規則將$var設置為列表（list）或 map 中的每個項目，
輸出樣式中包含使用$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 指令重復輸出嵌套樣式，直到SassScript表達式返回結果
為false。這可用于實現比@for語句更復雜的循環
*/
$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}
/*
*
*混入指令
*
*/
/*
混入(mixin)允許定義可以在整個樣式表中重復使用的樣式，
而避免了使用無語意的類（class），比如 .float-left。
混入(mixin)還可以包含所有的CSS規則，以及任何其他在Sass
文檔中被允許使用的東西。他們甚至可以帶arguments，引入變
量，只需少量的混入(mixin)代碼就能輸出多樣化的樣式。
*/
/*1、定義一個混入(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）也可以包含在任何規則的外（即，在文檔的根）,
只要它們不直接定義的任何屬性或使用任何父選擇器引用
*/
@mixin silly-links {a {color: blue;background-color: red;}
}
@include silly-links;
/*帶參數*/
@mixin sexy-border($color, $width: 1in) {border: {color: $color;width: $width;style: dashed;}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

?下面是一個按鈕樣式制作例子：

.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中調用即可。

<!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>?