What does the '$' in CSS mean?

Question

I saw an animated project with a bunch of '$' in it. I have no idea what dollar signs are used for in CSS. I'm guessing it is for animations. Here is a sample of some of the code I was looking at:

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

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

Here's a link to the entire project: https://codepen.io/AshBardhan/pen/dNKwXz

Answer 1

Those are SASS (SCSS) variables which store color properties so they can be used later on. Also, to give you a basic concept, SASS is a CSS pre-processor which allows you to nest selectors, use mixins, store values on variables, etc.

You can see it (scss) referenced in the codepen CSS section:

Taken from SASS docs (refer to variables):

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;
}

If you are wondering the difference between SASS and SCSS, its basically syntax, below taken 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.

Answer 2

$ initiates a variable in SASS which is a language extension that compiles to CSS (Similar to how CoffeeScript compiles to JavaScript) since CSS does not feature variables on its own.