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

　　

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

 

　　在這之前，我們先了解一點，sass和scss有什么區別？

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

　　SCSS 和 Sass 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：

　　　　1、文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名

　　　　2、語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

 

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

 

　　OK，准備就緒，我們今天就從以下幾點說說它們的區別，當然我們今天只說了一些比較常用的功能，它們本身是有着極其豐富的擴展特性：

 

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

　　

　　一、基本語法　　

　　Less & SCSS：

.div{
    color: #000;
}

 

　　Stylus：

.div
    color: #000

 

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

 

　　二、嵌套語法

 

　　Less & SCSS：

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

 

　　Stylus：

.box 
  &.item 
    color: #000

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

 

 

　　三、變量

　　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返回值；

 

 

　　敲黑板時間到：

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