Sass变量示例详解 _变量

Sass变量用于存储可以在需要时在整个样式表中重复使用的信息。你可以根据将来的可重用性存储颜色, 字体堆栈或任何CSS值之类的内容。
$符号用于使某物成为变量。请参见语法。
SCSS语法：

$font-stack:Helvetica, sans-serif; $primary-color: #333; body {font: 100% $font-stack; color: $primary-color; }

等效的Sass语法：

$font-stack:Helvetica, sans-serif$primary-color: #333bodyfont: 100% $font-stackcolor: $primary-color

处理完后, 它将使用我们为$ font-stack和$ primary-color定义的变量, 并创建一个普通的CSS, 并将变量值放在CSS中。
处理后的CSS：

body {font: 100% Helvetica, sans-serif; color: #333; }

例：
让我们以一个示例来看一下Sass变量的用法。我们有一个名为” simple.html” 的HTML文件, 其中包含以下代码：
文件：simple.html

< html> < head> < title> Variable example of sass< /title> < link rel="stylesheet" type="text/css" href="http://www.srcmini.com/simple.css"/> < /head> < body> < h1> Simple Sass Example< /h1> < h3> Welcome to srcmini< /h3> < p> A solution of all technology.< /p> < /body> < /html>

创建一个名为” simple.scss” 的SCSS文件, 其代码如下：
文件：simple.scss

$font-stack:Helvetica, sans-serif; $primary-color: pink; body {font: 100% $font-stack; color: $primary-color; }

将两个文件都放在根文件夹中。
现在, 打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
执行以下代码：sass – watch simple.scss：simple.css
它将在同一目录中自动创建一个名为” simple.css” 的普通CSS文件。
例如：