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字体和粉红色显示了内容。

Sass 运算符

Sass 脚本