html - 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 预处理器，它允许您嵌套选择器、使用混合、在变量上存储值等。

你可以在codepen CSS部分看到它(scss)的引用:

取自SASS docs (引用变量):

Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example:

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

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

如果您想知道 SASS 和 SCSS 之间的区别，它的基本语法，如下所示 from docs :

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.