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（変数を参照）から撮影

：

は、あなたのスタイルシート全体で 再利用に必要な情報を格納するための方法として、変数を考えます。色、 フォントスタック、または再利用したいCSS値などを保存できます。 Sass は、何かを変数にするために$記号を使用します。ここでは例です：

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

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

from docsを取ら下のあなたは、SASSとSCSS、その基本的な構文の違いを不思議に思っている場合：

が

Sassのために利用可能な2つの構文があります。 SCSS（Sassy CSS）と呼ばれ、このリファレンス全体で使用されている最初のものは、CSSの 構文の拡張です。つまり、すべての有効なCSSスタイルシートは、同じ意味を持つ有効な SCSSファイルです。このシンタックスは、下記のSass 機能で強化されています。この構文を使用するファイルの拡張子は.scss です。

インデント構文として知られている第2及び古い構文（または 時には単に「サス」）は、書き込みCSSのより簡潔な方法を提供します。 は、括弧ではなくインデントを使用して、 セレクタのネストを示し、セミコロンではなく改行を使用してプロパティを区切ります。 この構文を使用するファイルの拡張子は.sassです。

Answer 2

$は、CSSはそれ自身の変数を備えていないため（のCoffeeScriptはJavaScriptにコンパイルする方法と同様に）CSSにコンパイル言語拡張ですSASS内の変数を開始します。