CSS中的"$"是什么意思? [英] What does the '$' in CSS mean?

问题描述

我看到了一个动画项目，里面有很多"$".我不知道CSS中使用了什么美元符号.我猜它是用于动画的.这是我正在查看的一些代码示例:

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

以下是整个项目的链接: https://codepen.io/AshBardhan/pen/dNKwXz

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

推荐答案

这些是存储颜色属性的SASS(SCSS)变量，以便以后使用.另外，为了给您一个基本的概念，SASS是CSS预处理器，它使您可以嵌套选择器，使用混合器，将值存储在变量中，等等.

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.

您可以在codepen CSS部分中看到它(scss):

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

来自 SASS文档 (指变量):

Taken from SASS docs (refer to variables):

将变量视为存储所需信息的一种方式 在整个样式表中重复使用.您可以存储颜色， 字体堆栈，或您认为要重用的任何CSS值.萨斯 使用$符号将某物设为变量.这是一个示例:

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

如果您想知道SASS和SCSS之间的区别，它的基本语法如下，请参见来自文档:

If you are wondering the difference between SASS and SCSS, its basically syntax, below taken from docs:

Sass有两种语法.第一个称为 SCSS (Sassy CSS)，并在本参考文献中始终使用，是对 CSS的语法.这意味着每个有效的CSS样式表都是有效的 具有相同含义的SCSS文件. Sass增强了此语法 如下所述的功能.使用此语法的文件带有.scss 扩展名.

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.

第二种或更旧的语法，称为缩进语法(或 有时只是" Sass ")提供了一种更为简洁的CSS编写方式.它 使用缩进而不是方括号来表示嵌套 选择符和换行符，而不是分号来分隔属性. 使用此语法的文件扩展名为.sass.

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.

这篇关于CSS中的"$"是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！