srcminiSass变量用于存储可以在需要时在整个样式表中重复使用的信息。你可以根据将来的可重用性存储颜色, 字体堆栈或任何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: #333
body
font: 100% $font-stack
color: $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="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文件。
例如：
创建的CSS文件” simple.css”包含以下代码：
body {
font: 100% Helvetica, sans-serif;
color: pink; }现在, 执行上面的html文件, 它将读取CSS值。
输出
在上面的示例中, 你可以看到HTML文件读取了CSS, 并相应地以Helvetica字体和粉红色显示了内容。
评论前必须登录！
注册