CSS中的'$'是什麼意思？

我看到一個帶有一堆'$'的動畫項目。我不知道在CSS中使用了什麼美元符號。我猜它是用於動畫。這是我一直在尋找一些代碼示例：

$emoji-base-color: #FFDA6A; 
$emoji-like-color: #548DFF; 

.emoji--like { 
background: $emoji-like-color; 
&:after { 
      content: 'Like'; 
     }

這裏有一個鏈接到整個項目：https://codepen.io/AshBardhan/pen/dNKwXz

來源

2017-08-02 Hayley Walters

+15

這是SCSS，而不是CSS。 – SLaks

這些是SCSS變量，而不是默認的CSS行爲。 – ITDerrickH

這是一個SCSS變量。您可以在這裏瞭解SCSS：http://sass-lang.com/。 – VictorGodoi

這些都是SASS（SCSS）用來存儲顏色屬性變量，這樣他們就可以使用稍後的。此外，爲了給你一個基本的概念，SASS是一個CSS預處理器，它允許你嵌套選擇器，使用混合，變量存儲值等。

你可以在codepen CSS部分看到它（scss）：

從SASS docs兩者（引用變量）：變量

覺得作爲一種方法來存儲要重用整個樣式表信息。您可以存儲顏色，字體堆棧或任何您認爲需要重用的CSS值。 Sass 使用$符號來創建一個變量。這裏有一個例子：

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 

body { 
    font: 100% $font-stack; 
    color: $primary-color; 
}

如果你想知道SASS和SCSS，其基本語法之間的差異，採取from docs如下：

有可供薩斯兩種語法。第一個，被稱爲SCSS （Sassy CSS），並在整篇文檔中使用，是CSS的語法的擴展。這意味着每個有效的CSS樣式表都是有效的 SCSS文件，其含義相同。此語法通過以下Sass 功能進行了增強。使用此語法的文件具有.scss 擴展名。

第二和較舊的語法，被稱爲縮進語法（或有時僅稱爲「薩斯」），提供了編寫的CSS的更簡潔的方式。它使用縮進而不是括號來表示嵌套選擇器和換行符，而不是用分號來分隔屬性。使用此語法的文件具有.sass擴展名。

來源

2017-08-02 16:46:27 Syden

$開始在SASS一個變量，它是一種語言擴展，編譯成CSS因爲CSS沒有特色在它自己的變量（以怎樣的CoffeeScript編譯爲JavaScript的類似）。

來源

2017-08-02 16:52:24 Emonadeo

CSS中的'$'是什麼意思？

回答

相關問題