一、是什么

Css 作為一門標記性語言，語法相對簡單，對使用者的要求較低，但同時也帶來一些問題

需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利于復用，尤其對于非前端開發(fā)工程師來講，往往會因為缺少 Css 編寫經(jīng)驗而很難寫出組織良好且易于維護的  Css 代碼

Css 預處理器便是針對上述問題的解決方案

預處理語言

擴充了 Css 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓  Css 更易維護、方便

本質(zhì)上，預處理是 Css 的超集

包含一套自定義的語法及一個解析器，根據(jù)這些語法定義自己的樣式規(guī)則，這些規(guī)則最終會通過解析器，編譯生成對應的 Css 文件

二、有哪些

Css 預編譯語言在前端里面有三大優(yōu)秀的預編處理器，分別是：

• sass
• less
• stylus

sass

2007 年誕生，最早也是最成熟的 Css 預處理器，擁有 Ruby 社區(qū)的支持和  Compass 這一最強大的  Css 框架，目前受  LESS 影響，已經(jīng)進化到了全面兼容  Css 的  Scss

文件后綴名為 .sass 與 scss ，可以嚴格按照 sass 的縮進方式省去大括號和分號

less

2009年出現(xiàn)，受 SASS 的影響較大，但又使用  Css 的語法，讓大部分開發(fā)者和設計師更容易上手，在  Ruby 社區(qū)之外支持者遠超過  SASS

其缺點是比起 SASS 來，可編程功能不夠，不過優(yōu)點是簡單和兼容  Css ，反過來也影響了  SASS 演變到了 Scss 的時代

stylus

Stylus 是一個 Css 的預處理框架，2010 年產(chǎn)生，來自  Node.js 社區(qū)，主要用來給  Node 項目進行  Css 預處理支持

所以 Stylus 是一種新型語言，可以創(chuàng)建健壯的、動態(tài)的、富有表現(xiàn)力的 Css 。比較年輕，其本質(zhì)上做的事情與 SASS/LESS 等類似

三、區(qū)別

雖然各種預處理器功能強大，但使用最多的，還是以下特性：

• 變量（variables）
• 作用域（scope）
• 代碼混合（ mixins）
• 嵌套（nested rules）
• 代碼模塊化（Modules）

因此，下面就展開這些方面的區(qū)別

基本使用

less和scss

.box {
  display: block;
}

sass
 

.box
  display: block

stylus

.box
  display: block

嵌套

三者的嵌套語法都是一致的，甚至連引用父級選擇器的標記 & 也相同

區(qū)別只是 Sass 和 Stylus 可以用沒有大括號的方式書寫

less

.a {
  &.b {
    color: red;
  }
}

變量

變量無疑為 Css 增加了一種有效的復用方式，減少了原來在 Css 中無法避免的重復「硬編碼」

less 聲明的變量必須以 @ 開頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號 : 分隔開

@red: #c00;

strong {
  color: @red;
}

sass 聲明的變量跟 less 十分的相似，只是變量名前面使用 @ 開頭

$red: #c00;

strong {
  color: $red;
}

stylus 聲明的變量沒有任何的限定，可以使用 $ 開頭，結尾的分號 ; 可有可無，但變量與變量值之間需要使用 =

在 stylus 中我們不建議使用 @ 符號開頭聲明變量

red = #c00

strong
  color: red

作用域

Css 預編譯器把變量賦予作用域，也就是存在生命周期。就像  js 一樣，它會先從局部作用域查找變量，依次向上級作用域查找

sass 中不存在全局變量

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 

編譯后

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（無全局變量概念）*/
} 

所以，在 sass 中最好不要定義相同的變量名

less 與 stylus 的作用域跟 javascript 十分的相似，首先會查找局部定義的變量，如果沒有找到，會像冒泡一樣，一級一級往下查找，直到根為止

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
} 

編譯后：

.scoped {
  color:white;/*白色（調(diào)用了局部變量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（調(diào)用了全局變量）*/
} 

混入

混入（mixin）應該說是預處理器最精髓的功能之一了，簡單點來說， Mixins 可以將一部分樣式抽出，作為單獨定義的模塊，被很多選擇器重復使用

可以在 Mixins 中定義變量或者默認參數(shù)

在 less 中，混合的用法是指將定義好的 ClassA 中引入另一個已經(jīng)定義的 Class ，也能夠傳遞參數(shù)，參數(shù)變量為 @ 聲明

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

編譯后

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

Sass 聲明 mixins 時需要使用 @mixinn ，后面緊跟 mixin 的名，也可以設置參數(shù)，參數(shù)名為變量 $ 聲明的形式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

stylus 中的混合和前兩款 Css 預處理器語言的混合略有不同，他可以不使用任何符號，就是直接聲明 Mixins 名，然后在定義參數(shù)和默認值之間用等號（=）來連接

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 調(diào)用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 調(diào)用error mixins，并將參數(shù)$borderWidth的值指定為5px */
} 

代碼模塊化

模塊化就是將 Css 代碼分成一個個模塊

scss 、 less 、 stylus 三者的使用方法都如下所示

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

參考文獻

https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA

到此這篇關于Css預編語言及區(qū)別詳解的文章就介紹到這了,更多相關Css預編語言內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！