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

Question

我看到了一个带有一堆'$'的动画项目。我不知道CSS中使用了什么美元符号。我猜这是动画。以下是我正在查看的一些代码的示例：

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

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

以下是整个项目的链接：https://codepen.io/AshBardhan/pen/dNKwXz

Answer 1

这些是存储颜色属性的SASS（SCSS）变量，以便以后可以使用它们。另外，为了给你一个基本概念，SASS是一个CSS预处理器，它允许你嵌套选择器，使用mixins，在变量上存储值等。

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

取自SASS docs（参考变量）：

  

将变量视为存储您想要的信息的一种方式   在整个样式表中重用。你可以存储颜色之类的东西，   字体堆栈，或您认为您想要重用的任何CSS值。萨斯   使用$符号来创建变量。这是一个例子：

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

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

如果您想知道SASS和SCSS之间的区别，它基本上是语法，下面是from docs：

  

Sass有两种语法可供使用。第一种，称为 SCSS   （Sassy CSS）并在整个引用中使用，是一个扩展   CSS的语法。这意味着每个有效的CSS样式表都是有效的   SCSS文件具有相同的含义。 Sass增强了这种语法   功能如下所述。使用此语法的文件具有.scss   扩展

     

第二个和更早的语法，称为缩进语法（或   有时只是“ Sass ”），提供了一种更简洁的CSS编写方式。它   使用缩进而不是括号来表示嵌套   选择器和换行符而不是分号来分隔属性。   使用此语法的文件具有.sass扩展名。

Answer 2

$在SASS中启动一个变量，这是一个编译为CSS的语言扩展（类似于CoffeeScript编译为JavaScript的方式），因为CSS没有自己的变量。< / p>