一饰剥、目的

主要是解決項目中頁面樣式不統(tǒng)一殊霞、減少冗余代碼，提高了樣式代碼的可維護性

二汰蓉、什么是CSS 預(yù)處理器

1绷蹲、出現(xiàn)的背景

css的語法不夠強大，不能嵌套書寫，導(dǎo)致模塊化開發(fā)中會出現(xiàn)很多重復(fù)的選擇器祝钢，沒有變量和合理的樣式復(fù)用機制比规，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護拦英，增加了許多工作量蜒什。

使用CSS預(yù)處理器，提供了 CSS 缺失的樣式層復(fù)用機制龄章、擴展了 CSS 語言吃谣，增加了變量、Mixin做裙、函數(shù)等特性岗憋，使 CSS 更易維護和擴展，減少冗余代碼锚贱，提高了樣式代碼的可維護性仔戈。

2、定義

就是用一種專門的編程語言拧廊，進行 Web 頁面樣式設(shè)計监徘，再通過編譯器轉(zhuǎn)化為正常的 CSS 文件，以供項目使用吧碾。

CSS預(yù)處理語言有SCSS (SASS) 和LESS凰盔、POSTCSS。

SCSS和SASS 有什么區(qū)別呢

· 文件擴展名不同倦春，文件后綴分別是“.scss”和“.sass”

· sass是以嚴格縮進語法規(guī)則來編寫代碼的户敬，不包括大括號和分號，而scss的語法和css書寫語法類似睁本；sass的安裝和使用不細說了尿庐；

· scss是sass3.0引入的語法，可以理解scss是sass的一個升級版本呢堰，是一種SCSS-like語言抄瑟，彌補了sass和css之間的鴻溝

2、常見的CSS處理器 LESS 和 SASS

相同之處：

• LESS和SCSS都是css的預(yù)處理器枉疼，可以擁有變量皮假，運算，繼承往衷，嵌套的功能钞翔，使用兩者可以使代碼更加的便于閱讀和維護。
• 都可以通過自帶的插件席舍，轉(zhuǎn)成相對應(yīng)的css文件。
• 都可以參數(shù)混入哮笆，可以傳遞參數(shù)的class来颤，就像函數(shù)一樣
• 嵌套的規(guī)則相同汰扭，都是class嵌套class

區(qū)別：

• Less環(huán)境較Sass簡單
  Sass的安裝需要安裝Ruby環(huán)境，Less基于JavaScript福铅，是需要引入Less.js來處理代碼輸出css到瀏覽器萝毛，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件滑黔，直接放在項目中笆包，有l(wèi)ess.app、SimpleLess略荡、CodeKit.app這樣的工具庵佣，也有在線編輯地址。

• Less使用較Sass簡單

• Sass較Less略強大一些
  sass有變量和作用域汛兜；sass有函數(shù)的概念巴粪；進程控制；數(shù)據(jù)結(jié)構(gòu)等粥谬；

• Less與Sass處理機制不一樣
  前者是通過客戶端處理的肛根，后者是通過服務(wù)端處理，相比較之下前者解析會比后者慢一點漏策；

  代碼區(qū)別

  1派哲、變量插值

LESS采用@{XXXX}的形式，SCSS采用${XXXX}的形式

2掺喻、scss支持條件語句芭届，less不支持

SCSS可以使用if{}else，for循環(huán)等等巢寡，LESS不支持

3喉脖、應(yīng)用外部css文件方式不同

SCSS應(yīng)用的css文件名必須以‘_’開頭（下劃線），文件名如果以下劃線開頭的話抑月，sass會認為改文件是一個應(yīng)用文件树叽，不會將它轉(zhuǎn)成css文件

4、顏色函數(shù)

調(diào)整色相的話谦絮，LESS使用spin（）的函數(shù)题诵；SCSS使用名為adjust_hue()的函數(shù)

5、引用父選擇器&符號的使用

LESS和SCSS都可以使用&符號表示父選擇器层皱，但是SCSS的&符號只能出現(xiàn)在一個組合選擇器的開始位置性锭，LESS則沒有這個限制

3、為什么選擇使用Sass而不是Less叫胖？

• Sass有更成熟的框架草冈，比如說Compass，而且有很多框架也使用Sass，比如說Foundation怎棱；
• 就國外討論的熱度來說哩俭，Sass絕對優(yōu)于less；
• 在國內(nèi)less集中的教程是less中文官網(wǎng)拳恋，而Sass的中文教程凡资，在國內(nèi)較為普遍；
• sass也是成熟的CSS預(yù)處理器之一谬运，而且有一個穩(wěn)定隙赁，強大的團隊在維護；
• scss對sass語法進行了改良梆暖，sass 3變成了Scss(sassy css)伞访。與原來的語法兼容，只是用{}取代了原來的縮進;
• bootstrap（Web框架）最新推出的版本4式廷，使用的就是Sass咐扭，可以看出sass有更多市場價值。

二滑废、SASS是什么

1蝗肪、定義

Sass 是一款強化 CSS 的輔助工具

CSS 語法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)蠕趁、混合 (mixins)薛闪、**導(dǎo)入 **(inline imports) 等高級功能，這些拓展令 CSS 更加強大與優(yōu)雅俺陋。

使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件豁延，以及更高效地開發(fā)項目。

Sass (英文全稱：Syntactically Awesome Stylesheets) 是一個最初由 Hampton Catlin 設(shè)計并由 Natalie Weizenbaum 開發(fā)的層疊樣式表語言腊状。

Sass 是一個 CSS 預(yù)處理器诱咏。

Sass 是 CSS 擴展語言，可以幫助我們減少 CSS 重復(fù)的代碼缴挖，節(jié)省開發(fā)時間袋狞。

Sass 完全兼容所有版本的 CSS。

Sass 擴展了 CSS3映屋，增加了規(guī)則苟鸯、變量、混入棚点、選擇器早处、繼承、內(nèi)置函數(shù)等等特性瘫析。

Sass 生成良好格式化的 CSS 代碼砌梆，易于組織和維護默责。

Sass 文件后綴為 .scss。

三么库、為什么要用Scss

(1) Scss完全兼容所有版本的CSS傻丝。

(2) 特性豐富甘有，Scss擁有比其他任何CSS擴展語言更多的功能和特性诉儒。

(3) 技術(shù)成熟，功能強大亏掀。

(4) 行業(yè)認可忱反，越來越多的人使用Scss。

(5) 社區(qū)龐大滤愕，大多數(shù)科技企業(yè)和成百上千名開發(fā)者為Sass提供支持温算。

(6) 有無數(shù)框架使用Scss構(gòu)建，如Compass间影、Bootstrap注竿、Bourbon和Susy。

(7) CSS 本身語法不夠強大魂贬，導(dǎo)致重復(fù)編寫一些代碼巩割，無法實現(xiàn)復(fù)用，而且在代碼也不方便維護付燥。

四宣谈、怎么用

4.1、npm安裝

# 安裝
npm install -g sass

# 版本
sass --version

4.2键科、變量

Sass 變量可以存儲以下信息：

• 字符串
• 數(shù)字
• 顏色值
• 布爾值
• 列表
• null 值

/* 定義變量與值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* 使用變量 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

4.3闻丑、變量作用域

Sass 變量的作用域只能在當前的層級上有效果

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里頭有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

4.4勋颖、Sass 嵌套規(guī)則與屬性

Sass 嵌套 CSS 選擇器類似于 HTML 的嵌套規(guī)則嗦嗡。

如下我們嵌套一個導(dǎo)航欄的樣式：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Sass嵌套屬性

很多 CSS 屬性都有同樣的前綴，例如：font-family, font-size 和 font-weight 饭玲， text-align, text-transform 和 text-overflow侥祭。

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

4.5、 Sass @import

定義一些變量定義的文件咱枉、顏色相關(guān)的文件卑硫、字體相關(guān)的文件，使用@import引入

Sass @import 指令語法如下:

@import filename;
// 全局變量
@import './variables.scss';
// ele樣式覆蓋
@import './element-ui.scss';

4.6蚕断、 Sass Partials

如果你不希望將一個 Sass 的代碼文件編譯到一個 CSS 文件欢伏，你可以在文件名的開頭添加一個下劃線。這將告訴 Sass 不要將其編譯到 CSS 文件

Sass Partials 語法格式：

_filename;

注意：請不要將帶下劃線與不帶下劃線的同名文件放置在同一個目錄下亿乳，比如硝拧，_colors.scss 和 colors.scss 不能同時存在于同一個目錄下径筏，否則帶下劃線的文件將會被忽略

4.7、Sass @mixin

@mixin 指令允許我們定義一個可以在整個樣式表中重復(fù)使用的樣式。

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

注意：Sass 的連接符號 - 與下劃線符號 _ 是相同的，也就是 @mixin important-text { } 與 @mixin important_text { } 是一樣的混入拗引。

4.8毕荐、Sass@include

@include 指令可用于包含一混入：

.danger {
  @include important-text;
  background-color: green;
}

混入中也可以包含混入

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

向混入傳遞變量

/* 混入接收兩個參數(shù) */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 調(diào)用混入，并傳遞兩個參數(shù)
}

混入的參數(shù)也可以定義默認值

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

在包含混入時舶沿，你只需要傳遞需要的變量名及其值：

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

可變參數(shù)

有時，不能確定一個混入（mixin）或者一個函數(shù)（function）使用多少個參數(shù)，這時我們就可以使用 ... 來設(shè)置可變參數(shù)勋拟。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

瀏覽器前綴使用混入

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

4.9、Sass @extend 與 繼承

@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承妈候。

如果一個樣式與另外一個樣式幾乎相同敢靡，只有少量的區(qū)別，則使用 @extend 就顯得很有用苦银。

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

使用 @extend 后啸胧，我們在 HTML 按鈕標簽中就不需要指定多個類 class="button-basic button-report" ，只需要設(shè)置 class="button-report" 類就好了幔虏。

@extend 很好的體現(xiàn)了代碼的復(fù)用.

4.10纺念、函數(shù)

Sass 字符串相關(guān)函數(shù)

Sass 數(shù)字相關(guān)函數(shù)

Sass 列表(List)相關(guān)函數(shù)

Sass 映射(Map)相關(guān)函數(shù)

Sass 選擇器相關(guān)函數(shù)

Sass Introspection 相關(guān)函數(shù)

Sass 顏色相關(guān)函數(shù)

4.11、Scss中公共變量的導(dǎo)出方法 export

:export 關(guān)鍵詞

$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;
:export {
  menuText: $menuText;
}

4.12所计、·變量嵌套引用：即字符串插值柠辞，需要使用 #{} 來進行包裹

left : left ;
.father02 {
   width : 300px ;
   height : 300px ;
   border : $border ; //使用全局變量
   border- #{$left} : 2px solid purple ; //使用字符串插值之前必須先聲明
}

4.13、使用@function 自定義函數(shù)及使用

@function double ( $sn ){ //SCSS允許自定義函數(shù)
   @return $sn * 2 ;
}
.myText {
   border : 1px solid red ;
   width : double ( 200px ); //使用在SCSS中自定義的函數(shù)
}

4.14主胧、·SCSS占位符 %

使用% 聲明的代碼塊叭首，如果不被@extend調(diào)用的話就不會被編譯。編譯出來的代碼會將相同的代碼合并在一起踪栋，代碼變得十分簡潔焙格。

%m5 { background-color : lightblue ;}
.P1 { @extend %m5 ; }

五、:root

:root 這個 CSS 偽類匹配文檔樹的根元素夷都。對于 HTML 來說眷唉，:root 表示 <html> 元素，除了優(yōu)先級更高之外囤官，與 html 選擇器相同冬阳。

聲明全局css變量

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}