sass與scss之間有什么差異

這篇文章主要介紹sass與scss之間有什么差異，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

sass和scss是CSS預處理器Sass提供的兩種不同的語法，兩者相似并且都做同樣的事情，但是以不同的風格書寫。SCSS是最新的，被認為比Sass更好。

下面我們先來了解一下CSS預處理器Sass提供的兩種不同的語法sass和scss的相關知識。

sass，也稱為縮進語法，類似于Ruby的編程語言。

它是來自另一個名為Haml的預處理器，受Haml的簡潔啟發，是由Ruby開發人員設計和編寫的，因此，Sass樣式表使用類似Ruby的語法。沒

sass適用于那些喜歡與CSS相似的簡潔性的人。它使用行的縮進來指定塊，而不是括號和分號，因此有括號，沒有分號和嚴格的縮進。sass語法中的文件使用擴展名.sass。

例：

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius.my-element
  color= !primary-color
  width= 100%
  overflow= hidden.my-other-element
  +border-radius(5px)

正如我們所看到的，與常規CSS相比，這是一個相當大的變化！變量標志是“!”不“$”，分配符號“=”，而不是“：”，這樣有點奇怪！

但這是Sass在2010年5月3.0版到來之前的樣子，之后Sassy CSS引入了一種名為scss的全新語法。這種語法旨在通過引入CSS友好語法來縮小Sass和CSS之間的差距。

scss，類似與CSS的語法，完全符合CSS標準，

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}
.my-other-element {
  @include border-radius(5px);
}

scss絕對比sass更接近CSS。

scss和sass之間的區別

sass語法類似于rubby，它沒有括號的用法，沒有嚴格的縮進，沒有分號；變量符號是“！”而不是“$”，賦值符號是“=”而不是“：”。

less語法類似于CSS，需要使用大括號，使用分號；變量符號是“$”，賦值符號是“：”。

以上是sass與scss之間有什么差異的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！