sass與less的區別？Stylus又是啥？

　　

　　如今寫樣式你們基本上都會用上CSS預處理器，而比較流行的預處理器就是這三位老哥了Less、Sass 和 Stylus；

 

　　在這以前，咱們先了解一點，sass和scss有什麼區別？

　　SCSS 是 Sass 3 引入新的語法，其語法徹底兼容 CSS3，而且繼承了 Sass 的強大功能。

　　SCSS 和 Sass 實際上是同一種東西，咱們平時都稱之爲 Sass，二者之間不一樣之處有如下兩點：

　　　　一、文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名

　　　　二、語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。

 

　　後面的 Sass 代碼會用被更多人接受的 SCSS 風格給出；

 

　　OK，準備就緒，咱們今天就從如下幾點說說它們的區別，固然咱們今天只說了一些比較經常使用的功能，它們自己是有着極其豐富的擴展特性：

 

• 　　基本語法
• 　　嵌套語法
• 　　變量
• 　　@import
• 　　函數

　　

　　1、基本語法　　

　　Less & SCSS：

.div{
    color: #000;
}

 

　　Stylus：

.div
    color: #000

 

　　區別：less和scss沒有區別，stylus則是沒有大括號({})和分號(;)；

 

　　2、嵌套語法

 

　　Less & SCSS：

.box {
  &.item {
    color: #000;
  }
}

 

　　Stylus：

.box 
  &.item 
    color: #000

　　區別：三者的嵌套語法都是一致的，甚至連引用父級選擇器的標記 & 也相同。區別也只是大括號({})和分號(;)；

 

 

　　3、變量

　　Less：

@pink: #FFB6C1;

.div {
  color: @pink;
}

 

　　Sass：

$pink: #FFB6C1;

.div {
  color: $pink;
}

　　Stylus：

pink = #FFB6C1;

.div 
  color: pink;

　　區別：變量的設置和引用都很明顯；

 

　　四、@import

　　Less：

@import (option) filename;

optional:

reference: 使用該less文件可是不輸出它
inline: 包括在源文件中輸出，可是不做處理
less: 將該文件視爲less文件，不管其擴展名爲何
css: 將文件視爲css文件，不管擴展名爲何
once: 該文件僅可導入一次 (默認)
multiple: 該文件能夠屢次導入
optional: 當沒有發現文件時仍然編譯

　　Sass：

@import  filename;

　　Stylus：

@import  filename;

　　區別：三者形式上基本都沒有太大區別，less多了選項，可是處理行爲上卻有一些不一樣。

　　　　　less擴展了原生的@import的語法，若是文件是.css的擴展名，將處理爲CSS和@import語句保持原樣，若是爲其餘的擴展名將處理爲less導入；

　　　　　stylus與less相似，當使用@import沒有.css擴展，會被認爲是Stylus片斷；

　　　　　sass則有點不一樣，它沒有擴展語法，而是本身推斷引入的方式，規則以下：

　　　　　　　　默認狀況下，它會尋找 Sass 文件並直接引入， 可是，在少數幾種狀況下，它會被編譯成 CSS 的 @import 規則：

• • • 　若是文件的擴展名是 .css。
    • 　若是文件名以 http:// 開頭。
    • 　若是文件名是 url()。
    • 　若是 @import 包含了任何媒體查詢（media queries）。

　　　　　　　　若是上述狀況都沒有出現，而且擴展名是 .scss 或 .sass， 該名稱的 Sass 或 SCSS 文件就會被引入。 若是沒有擴展名， Sass 將試着找出具備 .scss 或 .sass 擴展名的同名文件並將其引入。

 

　　五、函數

　　Less：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.box{
    .border-radius(10px)
}

　　Sass：

@mixin border-radius {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

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

//含參數
@function widthFn($n) { 
　　@return $n * 40px + ($n - 1) * 10px; 
} 
.leng { 
　　width: widthFn($n : 5); 
}

　　Stylus：

golden-ratio(n)
  n * 0.618

.golden-box
  width: 200px
  height: golden-ratio(@width)

　　區別：sass區別較大，須要顯示的使用關鍵字去調用，且非mixin時，須要return返回值；

 

 

　　敲黑板時間到：

　　 咱們今天說的只是一些平時比較經常使用的功能，且簡單組合的方式，在樣式預處理器這塊，還有很大的內容須要你們去逐步瞭解；