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

less、sass 和 stylus是比較流行的css預處理器，功能都差不多，寫法相差也不大（但是也有差別），使用都非常簡單，stylus是沒有大括號({})和分號(;)less、sass 和 stylus；scss 是 sass 3 引入新的語法，其語法完全相容 css3，並且繼承了 sass 的強大功能。1、基本語法；2、巢狀語法；3、變數；4、@import；5、函式**或參考：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，準備就緒，我們今天就從以下幾點說說它們的區別，當然我們今天只說了一些比較常用的功能，它們本身是有著極其豐富的擴充套件特性：

一、基本語法

less & scss：

.div

stylus：

.div

color: #000

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

二、巢狀語法

less & scss：

.box }

stylus：

.box

&.item

color: #000

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

三、變數

less：

@pink: #ffb6c1;
.div

sass：

$pink: #ffb6c1;
.div

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規則：

如果上述情況都沒有出現，並且副檔名是.scss或.sass，該名稱的 sass 或 scss 檔案就會被引入。如果沒有副檔名， sass 將試著找出具有 .scss 或 .sass 副檔名的同名檔案並將其引入。

五、函式

less：

.border-radius(@radius: 5px) .box

sass：

@mixin border-radius .page-title 
//含引數
@function widthfn($n) .leng

stylus：

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

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

敲黑板時間到：

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

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

less與sass的區別點

less和sass的使用區別

sass與less對比學習

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

less與sass的區別點

less和sass的使用區別

sass與less對比學習

相關推薦