[解決済み] 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プリプロセッサであり、セレクタのネスト、ミキシンの使用、変数への値の保存などを行うことができます。

codepenのCSSの項目で、それ（scss）が参照されています。

より引用 SASSドキュメント (変数を参照)。

変数とは、「使いたい情報を保存する方法」と考えてください。 スタイルシート全体で再利用します。色のようなものを保存することができます。 フォントスタック、または再利用したいと思うあらゆるCSSの値です。Sass は、$記号を使用して何かを変数にします。以下はその例です。

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

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

SASSとSCSSの違いを知りたい方は、以下のような構文が基本です。 ドキュメントより :

Sassには2つの構文が用意されています。1 つは SCSS (Sassy CSS) の拡張版であり、このリファレンス全体を通して使用されます。 の構文があります。これは、すべての有効なCSSスタイルシートが、有効な SCSSファイルは同じ意味である。この構文は、Sass の機能は後述します。この構文を使用するファイルには、.scss という拡張子を持つ。

2つ目の古い構文は、インデント構文（または ということもあります。 サス ") は、より簡潔なCSSの書き方を提供します。これは の入れ子を示すために、括弧ではなくインデントを使用します。 セレクタを使用し、プロパティを区切るのにセミコロンではなく改行を使用します。 この構文を使用するファイルの拡張子は.sassです。