Что означает "$" в 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

Ответ 1

Это переменные SASS (SCSS), которые хранят свойства цвета, чтобы их можно было использовать позже. Кроме того, чтобы дать вам базовую концепцию, SASS - это препроцессор CSS, который позволяет вкладывать селекторы, использовать миксины, сохранять значения в переменных и т.д.

Вы можете увидеть его (scss), на который есть ссылка в разделе CSS кода:

Взято из документов SASS (см. переменные):

Думайте о переменных как о способе хранения информации, которую вы хотите повторно использовать в вашей таблице стилей. Вы можете хранить такие вещи, как цвета, наборы шрифтов или любое значение CSS, которое вы хотите использовать повторно. пререкаться использует символ $, чтобы сделать что-то переменным. Вот пример:

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

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

Если вас интересует разница между SASS и SCSS, в основном это синтаксис, приведенный ниже из документации:

Для Sass доступны два синтаксиса. Первый, известный как SCSS(Sassy CSS) и используется на протяжении всей этой ссылки, является расширением синтаксис CSS. Это означает, что каждая действительная таблица стилей CSS является допустимой Файл SCSS с тем же значением. Этот синтаксис улучшен с Sass особенности описаны ниже. Файлы, использующие этот синтаксис, имеют .scss расширение.

Второй и более старый синтаксис, известный как синтаксис с отступом (или иногда просто "Sass"), обеспечивает более краткий способ написания CSS. Это использует отступ, а не квадратные скобки для обозначения вложенности селекторы и символы новой строки, а не точки с запятой для разделения свойств. Файлы, использующие этот синтаксис, имеют расширение .sass.

Ответ 2

$ инициирует переменную в SASS, которая является языковым расширением, компилируемым в CSS (аналогично тому, как CoffeeScript компилируется в JavaScript), поскольку CSS не содержит переменных самостоятельно.