What does "$" mean in CSS?
I've seen an animation project with a bunch of "$" in it. I have no idea what the dollar signs are used for in CSS. I guess this is for animation. Here is some sample code I was looking at:
$emoji-base-color: #FFDA6A;
$emoji-like-color: #548DFF;
.emoji--like {
background: $emoji-like-color;
&:after {
content: 'Like';
}
Here is a link to the whole project: https://codepen.io/AshBardhan/pen/dNKwXz
source to share
These are SASS Variables (SCSS) that store color properties so that you can use them later. Also, to give you a basic concept, SASS is a CSS preprocessor that allows you to nest selectors, use mixins, store values in variables, etc.
You can see it (scss) referenced in the CSS section of the code:
Taken from the SASS docs (see variables):
Think of variables as a way to store information that you want to reuse in your stylesheet. You can store things like colors, fontsets, or whatever CSS value you want to reuse. bickering uses the $ symbol to make things variable. Here's an example:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
If you are interested in the difference between SASS and SCSS, it is mainly the syntax given below from the documentation :
There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and is used throughout this link, is a CSS syntax extension. This means that every valid CSS style sheet is a valid SCSS file with the same value. This syntax is improved 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 shorter way of writing CSS. This uses indentation, not square brackets, to denote nesting selectors and newlines, rather than semicolons to separate properties. Files using this syntax have the .sass extension.
source to share