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之間的差異是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！