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

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

您可以在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之间的区别,它的基本语法,下面取自docs:

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

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