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

来源

2017-08-02 Hayley Walters

+15

这是SCSS，而不是CSS。 – SLaks

这些是SCSS变量，而不是默认的CSS行为。 – ITDerrickH

这是一个SCSS变量。您可以在这里了解SCSS：http://sass-lang.com/。 – VictorGodoi

这些都是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; 
}

如果你想知道SASS和SCSS，其基本语法之间的差异，采取from docs如下：

有可供萨斯两种语法。第一个，被称为SCSS （Sassy CSS），并在整篇文档中使用，是CSS的语法的扩展。这意味着每个有效的CSS样式表都是有效的 SCSS文件，其含义相同。此语法通过以下Sass 功能进行了增强。使用此语法的文件具有.scss 扩展名。

第二和较旧的语法，被称为缩进语法（或有时仅称为“萨斯”），提供了编写的CSS的更简洁的方式。它使用缩进而不是括号来表示嵌套选择器和换行符，而不是用分号来分隔属性。使用此语法的文件具有.sass扩展名。

来源

2017-08-02 16:46:27 Syden

$开始在SASS一个变量，它是一种语言扩展，编译成CSS因为CSS没有特色在它自己的变量（以怎样的CoffeeScript编译为JavaScript的类似）。

来源

2017-08-02 16:52:24 Emonadeo

CSS中的'$'是什么意思？

回答

相关问题