Sass 变量

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
它将创建一个名为"
例如:

Sass 变量_https://bianchenghao6.com_【SASS 教程】_第1张

创建的CSS文件" simple.css"包含以下代码:
body {
  font: 100% Helvetica, sans-serif;
  color: pink; }

现在,执行上述html文件,它将读取CSS值。
在上面的示例中,您可以看到HTML文件读取了CSS,并相应地以Helvetica字体和粉红色显示了内容。