Sass 变量
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: #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 lidihuo</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
它将创建一个名为"
例如:
创建的CSS文件" simple.css"包含以下代码:
body {
font: 100% Helvetica, sans-serif;
color: pink; }
现在,执行上述html文件,它将读取CSS值。
在上面的示例中,您可以看到HTML文件读取了CSS,并相应地以Helvetica字体和粉红色显示了内容。