less，sass，stylus配置和應用教程及三者比較

時間  2019-11-17
標籤 sass stylus 配置 應用 教程 比較 简体版
原文   原文鏈接

less，sass，stylus配置和應用教程及三者比較javascript

 Lessphp

   1. 定義：css

      Less是CSS預處理語言，在css基礎之上增長了諸如變量，混合(mix)，繼承，運算，函數等功能，LESS既能夠運行在客戶端(支持IE10+，firefox，Webkit)，也能夠藉助於Node.js在服務器端運行(支持IE6+，firefox，Webkit)。html

      什麼是CSS預處理技術？CSS預處理技術，是指用一種新語言用來爲CSS 增長可編程的的特性，無需考慮瀏覽器的兼容性問題。你能夠在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可讓你的 CSS 更見簡潔，適應性更強。支持多樣性的CSS語法.前端

    2. 配置教程(如何使用)。java

       1.客戶端使用Less文件：node

        客戶端使用less文件很簡單，只須要引用less.js便可(下面是線上cdn的less.js)：以下在頁面上這樣引用。linux

      <link rel="stylesheet/less" type="text/css" href="styles.less" />git

     <script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>github

     注意： 上面的less文件 是咱們本身寫的less樣式文件，且必定要放在less.js以前，這樣才能夠正確的被解析成正常的css樣式。且通過測試使用客戶端這樣引用在IE6-9並不生效，也就是說並無和網上說的同樣能正確被解析css樣式，因此咱們不建議用客戶端這樣引用。

   下面咱們先來看看Less的變量，混合，繼承，運算，函數等功能的demo。

    1.    變量：

         變量容許咱們單獨定於一系列通用的樣式，而後在須要的時候去調用他。以下代碼：

// LESS
@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}

在瀏覽器預覽，他會被正確的解析成以下css樣式：

/* 生成的 CSS */
#header {
color: #4D926F;
}
h2 {
 color: #4D926F;
}

也就是說咱們能夠用javascript語言來這樣理解，@color能夠做爲一個全局變量，而後在各個函數裏面咱們想使用它，能夠直接調用它。

  2.混合：

       混合能夠將一個已定義好的classA輕鬆引入到classB中，從而簡單的實現classB繼承與classA中的全部屬性。咱們也能夠帶參數地調用，就像使用函數同樣。以下代碼:

// LESS
.rounded-corners (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}
#header {
 .rounded-corners;
}
#footer{
 .rounded-corners(10px);
}

在css中會被解析成以下代碼

/* 生成的 CSS */
#header {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}
#footer {
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

    3.嵌套規則：

         咱們能夠在一個選擇器中嵌套另外一個選擇器來實現繼承，這樣很大程度上減小了代碼量，而且代碼看起來更加清晰。以下代碼演示被解析成css後的樣式：

// LESS
#header {
 h1 {
    font-size: 26px;
    font-weight: bold;
 }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
   }
 }
}

被生成css文件以下樣式：

/* 生成的 CSS */
#header h1 {
 font-size: 26px;
 font-weight: bold;
}
#header p {
 font-size: 12px;
}
#header p a {
 text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}

    4. 函數 & 運算

           運算提供了加，減，乘，除操做，咱們能夠作屬性值和顏色值得運算，這樣就能夠實現屬性值之間的複雜關係。以下代碼：

// LESS
@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer { 
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

被生成後的CSS代碼以下：

/* 生成的 CSS */
#header {
 color: #333;
 border-left: 1px;
 border-right: 2px;
}
#footer { 
 color: #114411;
 border-color: #7d2717;
}

等等操做，我這邊不一一列舉。

注意：  1. 客戶端這樣引用less.js文件來解析style.less成真正的樣式，在真正的項目中儘可能不要這樣使用，由於less.js壓縮後的代碼也有100KB，對於性能方面有必定的影響，且經過測試IE6-IE9並不支持。若是要使用less的話，咱們建議最好使用node.js或其餘第三方工具進行預編譯。接下來咱們會談談如何用nodejs來進行編譯less文件。

            2.在作demo時候，咱們要預覽效果要使用本地服務器環境下預覽效果，不能直接在本地打開頁面，不然這樣會報錯！以下：

 2.服務器端使用nodeJS來對Less文件進行編譯。

          原理：進入項目中使用nodeJS對好比index.less 編譯成index.css樣式文件，咱們在頁面上直接引用index.css便可，其餘的好比上面介紹客戶端less.js都不須要。

       步驟以下：

          1. 確保本機已安裝node及NPM(node包管理器)，而後在終端命令下運行命令以下：

           npm install less

           若是你想下載最新文檔版本的Less的話，能夠嘗試下面的操做：

           npm install less@latest

           演示以下：

             2.假如項目中的目錄以下：

其中index.less文件代碼以下：

 

進入根目錄中css文件下，使用以下命令：

lessc index.less > index.css  (也能夠把這句代碼寫到批處理bat裏面，直接運行下便可)。

便可把index.less 編譯成新的文件index.css，咱們能夠看看index.css文件代碼以下：

 

咱們如今再來看看根目錄文件就多了一個index.css文件，以下：

 

其中test.bat是批處理文件 咱們無論。

想更多的瞭解Less的話，能夠看以下教程。

http://www.bootcss.com/p/lesscss/

http://less.bootcss.com/

在chrome瀏覽器下如何調式?

     Less和sass同樣，調試須要開啓編譯(koala)時輸出調試信息和瀏覽器調試功能，二者缺一不可。

     Less在chrome下如何設置,和sass同樣的。

    koala開啓

         koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。 須要選下載安裝，下載網址以下：

       詳情瞭解網址：http://koala-app.com/index-zh.html

       開啓瀏覽器調試

       谷歌瀏覽器調試

          F12打開調試面板，點擊調試面板右上角的齒輪圖標打開設置，在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS。

f12打開調試面板，就能夠看到原先右邊的css文件變成了咱們如今的less文件.以下圖

點擊less文件，會跳到source裏面的less源文件，如今能夠在裏面進行修改，修改完成後能夠右鍵選擇save或save as命令，而後替換咱們本地的less源文件，刷新chrome就能夠看到變化（注意，解析樣式須要必定時間）。之後只要ctrl+s保存修改就能夠在瀏覽器中看到修改效果了。

注意事項：切記項目文件名不能叫less文件夾，不然的話 編譯不會生成map文件，也就是說沒法定位到單獨的less文件了。以下：

 Sass

    1. 定義：

        Sass也是一種css預處理語言，語法也和Less相似，因此也很少說。

    2. 配置教程(如何使用)。

        Sass安裝：

         由於Sass依賴於ruby環境，因此裝sass以前要先安裝ruby，先到官網下載個ruby，地址：http://rubyinstaller.org/downloads 我下載的是Ruby 2.0.0-p481 (x64)

        Ruby安裝：

           在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，否則之後使用編譯軟件的時候會提示找不到ruby環境。以下：

    Sass安裝：

        安裝完ruby後，在開始菜單中，找到剛纔咱們安裝的ruby，打開Start Command Prompt with Ruby。以下：

而後直接在命令行中輸入以下命令：

gem install sass

最近由於牆的比較厲害，若是你沒有安裝成功，那麼請參考下面的淘寶的RubyGems鏡像安裝sass，若是成功則忽略。

  淘寶的RubyGems鏡像安裝sass安裝方法：

      因爲國內網絡緣由（你懂的），致使 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性鏈接失敗。這時候咱們能夠經過gem sources命令來配置源，先移除默認的https://rubygems.org源，

而後添加淘寶的源https://ruby.taobao.org/，而後查看下當前使用的源是哪一個，若是是淘寶的，則表示能夠輸入sass安裝命令gem install sass了。

出現以下信息，表示安裝成功了！

下面咱們能夠查看下Sass版本的命令以下：

你也能夠運行幫助命令行來查看你須要的命令

 

Sass基本語法介紹：

   1.   文件後綴名

         sass有兩種後綴名文件：一種後綴名爲sass，不使用大括號和分號；另外一種就是咱們這裏使用的scss文件，這種和咱們平時寫的css文件格式差很少，使用大括號和分號。而本教程中所說的全部sass文件都指後綴名爲scss的文件。在此也建議使用後綴名爲scss的文件，以免sass後綴名的嚴格格式要求報錯。以下圖：

 

    2.   變量

        sass的變量必須是$開頭，後面緊跟變量名，而變量值和變量名之間就須要使用冒號(:)分隔開（就像CSS屬性設置同樣），若是值後面加上!default則表示默認值。

      普通變量

      定義以後能夠在全局範圍內使用。以下圖所示：

  3.  嵌套

      sass能夠進行選擇器的嵌套，表示層級關係。

以下圖所示：

 

會被編譯成以下樣式：

     4．導入

         sass的導入(@import)規則和CSS的有所不一樣，編譯時會將@import的scss文件合併進來只生成一個CSS文件。可是若是你在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件同樣，導入的css文件不會合併到編譯後的文件中，而是以@import方式存在。

          全部的sass導入文件均可以忽略後綴名.scss。通常來講基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候能夠不寫下劃線，可寫成@import "mixin"。

      以下圖演示，其中reset.css是要被導入的文件。

      Reset.css

生成後的css文件以下：

     5.mixin

        sass中使用@mixin聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，也能夠給參數設置默認值。聲明的@mixin經過@include來調用。

        以下：

生成後文件

    6. 擴展/繼承

          sass中，選擇器繼承可讓選擇器繼承另外一個選擇器的全部樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟須要繼承的選擇器。

    7．運算

         sass具備運算的特性，能夠對數值型的Value(如：數字、顏色、變量等)進行加減乘除四則運算。請注意運算符先後請留一個空格，否則會出錯。

   以下：

等等語法，這裏列出一些簡單的語法，若是想須要更多的學習Sass的話，能夠請看Sass教程。地址： http://www.w3cplus.com/sassguide/

   Sass如何編譯

      1.  單文件轉換命令。

          sass sass.scss sass.css

       好比我項目結構以下：

咱們先來看看a.scss文件

body {

    background: #eee;

}

     Reset.css 文件css以下：

       div {color:red;}

     sass.scss 文件代碼以下：

     @import "reset.css";

     @import "a";

      p{color:red;}

   我運行test.bat處理命令以下：sass sass.scss sass.css

   便可生成sass.css新文件，以下：

其中sass.css文件代碼以下：

@import url(reset.css);

body {

  background: #eee;

}

p {

  color: red;

}

2. 對整個目錄進行編譯成css文件。

  1. 首先須要安裝rb-fsevent （更多學習https://github.com/thibaudgg/rb-fsevent/ ）安裝命令以下：

如上 說明已經安裝完成。

接着我對上面sass項目下的sass文件進行編譯成css文件，好比對上面Sass項目中的css文件夾下面的全部sass文件轉換成css文件，以下圖所示：

上面的意思是：對sass項目下的css文件全部的Sass文件 編譯成css文件。最後編譯以下目錄結構，以下圖：

更多的編譯介紹 請看下面網址：

http://www.w3cplus.com/sassguide/compile.html

Sass調式

    sass調試須要開啓編譯(koala)時輸出調試信息和瀏覽器調試功能，二者缺一不可。

開啓編譯調試信息

     目前sass的調試分爲兩種，一種爲開啓debug-info，一種爲開啓sourcemap（這個將成爲主流）。

如開啓的是debug-info，則解析的css文件中會有以@media -sass-debug-info開頭的代碼，如沒有則代表沒有開啓。

如開啓的是sourcemap，則在解析的css文件同目錄下生成一個.css.map的後綴名文件。

命令行開啓

    兩個的命令分別爲--debug-info，--sourcemap，開啓以下：

和

   koala開啓

       koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。 須要選下載安裝，下載網址以下：

詳情瞭解網址：http://koala-app.com/index-zh.html

       以下圖：點擊相應的文件，而後就會出現右邊的編譯選項，便可選擇是否開啓source map，debug info

    開啓瀏覽器調試

    谷歌瀏覽器調試

         F12打開調試面板，點擊調試面板右上角的齒輪圖標打開設置，在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS。

開啓--sourcemap編譯，f12打開調試面板，就能夠看到原先右邊的css文件變成了咱們如今的scss文件.

點擊scss文件，會跳到source裏面的scss源文件，如今能夠在裏面進行修改，修改完成後能夠右鍵選擇save或save as命令，而後替換咱們本地的scss源文件，刷新chrome就能夠看到變化（注意，解析樣式須要必定時間）。之後只要ctrl+s保存修改就能夠在瀏覽器中看到修改效果了。

Stylus

     1.定義：

          Stylus也是一門css預處理語言，能夠建立健壯的，動態的，富有表現力的css. 默認使用 .styl 的做爲文件擴展名，支持多樣性的CSS語法。

    2.配置教程(如何使用)。

          Stylus也是基於nodejs的，若是沒有安裝nodejs，請先安裝nodejs，能夠到這個網址裏面下載（http://nodejs.org/#download ），安裝完後node自帶了NPM(node包管理器)。

       而後，在終端命令下安裝stylus包，以下代碼：npm install stylus

如上，說明已經安裝成功了！

Stylus基本語法介紹：

   一: 變量

         咱們能夠指定表達式爲變量，而後在咱們的樣式中貫穿使用：咱們這樣以下寫：

第一種寫法：
font-size = 14px
body
  font font-size Arial, sans-seri
編譯成爲以下這樣：
body {
  font: 14px Arial, sans-serif;
}
第二種寫法：
變量能夠組成一個表達式列表 以下
font-size = 14px
font = font-size "Lucida Grande", Arial
body
  font font sans-serif
編譯成爲以下這樣：
body {
  font: 14px "Lucida Grande", Arial sans-serif;
}
標示符(變量名，函數等)，也可能包括$字符，以下：
$font-size = 14px
body {
  font: $font-size sans-serif;
}

    二：mixin(混入)

          例如，下面有定義的border-radius(n)方法，其卻做爲一個mixin（如，做爲狀態調用，而非表達式）調用。

當border-radius()選擇器中調用時候，屬性會被擴展並複製在選擇器中。

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius(5px)
會編譯成以下代碼：
form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
使用混合書寫，你能夠徹底忽略括號。
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius 5px
也能夠編譯成上面的同樣。

還能夠這樣寫：
/*聲明一個Mixin叫做「error」*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*調用error Mixins*/
.generic-error {
  error();/*直接調用error mixins*/
}
.login-error {
  error(5px);/*調用error mixins，並將參數$borderWidth的值重定義爲5px*/
}
會編譯成以下代碼：
/*聲明一個Mixin叫做「error」*/
.generic-error {
  border: 2px solid #f00;
  color: #f00; /*直接調用error mixins*/
}
.login-error {
  border: 5px solid #f00;
  color: #f00; /*調用error mixins，並將參數$borderWidth的值重定義爲5px*/
}

     三：嵌套

          CSS預處理器語言中的嵌套指的是在一個選擇器中嵌套另外一個選擇器來實現繼承，從而減小代碼量，而且增長了代碼的可讀性。好比說，咱們在CSS中多個元素有一個相同的父元素，那麼寫樣式會變得很乏味，咱們須要一遍一遍的在每一個元素前寫這個父元素，除非給特定的元素添加類名「class」或者ID。

以下代碼：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}
會編譯成以下代碼：
section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982c1;
}
section nav a:hover {
  text-decoration: underline;
}

   4. 繼承

       Stylus的繼承是把一個選擇器的全部樣式繼承到另個選擇器上。在繼承另個選擇器的樣式時須要使用「@extend」開始，後面緊跟被繼承的選擇器：

以下代碼：

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*繼承.block選擇器下全部樣式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*繼承.block選擇器下全部樣式*/
  color: #333;
  text-transform: uppercase;
}
他們會編譯成以下代碼：
.block,
p,
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
}
p { /*繼承.block選擇器下全部樣式*/
  border: 1px solid #eee;
}
ul,
ol { /*繼承.block選擇器下全部樣式*/
  color: #333;
  text-transform: uppercase;
}

     5. 方法(function)

         Stylus強大之處就在於其內置的語言函數定義。其定義與混入(mixins)一致；卻能夠返回值。

         返回值

        很簡單的例子，兩數值相加的方法.

add(a, b)
      a + b
    body 
      padding add(10px, 5)
    會編譯成以下代碼：
    body {
              padding: 15px;
    }
變量函數
咱們能夠把函數看成變量傳遞到新的函數中。例如，invoke()接受函數做爲參數，所以，咱們能夠傳遞add()
以下代碼：
invoke(a, b, fn)
  fn(a, b)
add(a, b)
  a + b
body
  padding invoke(5px, 10, add)
會編譯成以下代碼：
body {
  padding: 15px;
}
參數：
arguments是全部函數體都有的局部變量，包含傳遞的全部參數。
好比以下代碼
sum()
  n = 0
  for num in arguments
    n = n + num
body
  padding sum(1px,2,3,4,5,6)
會編譯成以下代碼：
body {
  padding: 21px;
}

     6. 導入(important)

         在CSS中，並不喜歡用@import來導入樣式，由於這樣的作法會增長http的請求。可是在CSS預處理器中的導入(@import)規則和CSS的有所不一樣，它只是在語義上導入不一樣的文件，但最終結果是生成一個CSS文件。若是你是通赤「@import ‘file.css’」導入「file.css」樣式文件，那效果跟普通CSS導入樣式文件同樣。注意：導入文件中定義了變量、混合等信息也將會被引入到主樣式文件中，所以須要避免他們的相互衝突。

Sass Less及Stylus對於導入都是同樣的，這裏就不列舉列子哦，具體的能夠看Sass或者Less了。

對於Stylus還有更多高級語法：若是想要繼續瞭解更多的話，能夠看以下文章：

中文版的張鑫旭翻譯的 http://www.zhangxinxu.com/jq/stylus/functions.php

英文原版的 http://learnboost.github.io/stylus/

對於styl文件如何編譯？

好比項目目錄結構以下：

編譯文件有以下幾種方式：

        1.     若是咱們想編譯單個文件，好比下編譯css2下的test.styl的話，咱們能夠作以下操做，首先進入項目中css2文件夾裏面，而後輸入以下語句：stylus <test.styl> test.css

Ok後在目錄下會生成一個test.css文件了 以下

 

其中test.styl 代碼以下：

font-size = 14px

body font font-size Arial, sans-seri

編譯成以下代碼：

body { font: 14px Arial, sans-seri;}

      2.     若是咱們想一塊兒編譯2個文件或者多個文件要如何編譯呢？

             咱們能夠這樣編譯：stylus test.styl test2.styl …

       3.     咱們也能夠對一整個文件夾進行編譯。好比文件夾爲css2，我想對css2下的全部styl文件進行編譯：以下代碼：

               stylus css2

       4.     若是編譯完成後，咱們須要對css壓縮的話，咱們能夠執行以下代碼：

               stylus --compress <test.styl> test.css

               就能夠對test.css壓縮了。

                                                            Less Sass Stylus三者比較

     一：變量

     Less 的變量名使用 @ 符號開始：以下代碼：

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}

    Sass 的變量必須是 $ 開始，而後變量名和值使用冒號隔開，跟 CSS 的屬性一致：$mainColor: #0982c1;

$siteWidth: 1024px;
$borderStyle: dotted;
body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

    Stylus 對變量名沒有任何限定，你能夠是 $ 開始，也能夠是任意的字符，並且與變量值之間能夠用冒號、空格隔開，須要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變量，但其對應的值並不會賦予該變量，換句話說，在 Stylus 的變量名不要用 @ 開頭。以下代碼：       

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
Body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth

上面的三種不一樣的 CSS 預處理器的寫法，最終都將產生相同的結果：

body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
}

    二：嵌套

     若是咱們須要在CSS中相同的 parent 引用多個元素，這將是很是乏味的，你須要一遍又一遍地寫 parent。Less Sass Stylus三者同樣的語法。例如：

section {
  margin: 10px;
  nav {
    height: 25px;
    a {
        color: #0982C1;
        &amp;:hover {
        text-decoration: underline;

      }
    }
  }
}

最終都生成css代碼以下：

section {
  margin: 10px;
}

section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;

}

     三：Mixins(混入)

      Less CSS 的混入語法：

.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  .error();

}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px);

}

Sass 的混入語法：

@mixin error($borderWidth: 2px) {

  border: $borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  @ include error();
}

.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @ include error(5px);
}

Stylus 的混入語法：

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  error();

}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px);

}

最終它們都將編譯成以下的 CSS 樣式：

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

    四：繼承

       當咱們須要爲多個元素定義相一樣式的時候，咱們能夠考慮使用繼承的作法。例如咱們常常須要：

在 Sass 和 Stylus 咱們能夠這樣寫：

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  @extend .block;
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block;
  color: #333;
  text-transform: uppercase;
}

最終編譯成以下代碼：

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;

}

p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}

在這方面 Less 表現的稍微弱一些，更像是混入寫法：

.block {
  margin: 10px 5px;
  padding: 2px;
} 
p {
  .block;
  border: 1px solid #EEE;
}
ul, ol {
  .block;
  color: #333;
  text-transform: uppercase;
}

最終被編譯成以下代碼：

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

      五：導入

             不少 CSS 開發者對導入的作法都不太感冒，由於它須要屢次的 HTTP 請求。可是在 CSS 預處理器中的導入操做則不一樣，它只是在語義上包含了不一樣的文件，但最終結果是一個單一的 CSS 文件，若是你是經過 @ import "file.css"; 導入 CSS 文件，那效果跟普通的 CSS 導入同樣。注意：導入文件中定義的混入、變量等信息也將會被引入到主樣式文件中，所以須要避免它們互相沖突。LESS Sass及Stylus都同樣，以下目錄代碼

其中test.styl代碼以下：

      font-size = 14px

　　body

  　font font-size Arial, sans-seri

main.styl代碼以下：

   @import "index.css";

   @import "test.styl";

  p {

       background: #0982C1;

  }

Index.css代碼以下：

p {

    color #3333;   

}

編譯運行 stylus <main.styl> main.css 最終生成代碼以下：

@import "index.css";

body {

  font: 14px Arial, sans-seri;

}

p {

  background: #0982c1;

}

六：運算符：(三者同樣)

    你能夠直接在 CSS 預處理器中進行樣式的計算，例如：

body {

  margin: (14px/2);

  top: 50px + 100px;

  right: 100px - 50px;

  left: 10 * 10;

}

最終編譯代碼以下：

body {

  margin: 7px;

  top: 150px;

  right: 50px;

  left: 100;

}

以上是基本的語法比較，一些函數通常狀況下css用不到，因此沒有列出來。

    若是你們對stylus感興趣的話，但願你們研究下stylus哦！關鍵是如何使用chrome或者firefox如何更方便的調式，和上面的Less或者Sass同樣的方便調式，咱們你們都知道 stylus比less sass語法更方便，使用起來更好，可是目前我沒有看到Stylus的調式沒有Less，sass方便，所以想問問你們有沒有使用過Stylus開發項目？那麼若是用過如何更方便的調式代碼？但願你們有研究過但願能分享下？謝謝了！

 LESS和Sass及Stylus Demo下載

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程