Sass——变量

说明

程序员使用变量来表示数据，如数字值、字符或内存地址。变量的重要性在于可以重复使用整个样式表中存储在变量中的值。

语法

$variable_name : some value;

变量使用美元符号 ($) 定义，以分号 (;) 结尾。

示例

以下示例演示了 SCSS 文件中变量的使用——

<html>
   <head>
      <title>Variables</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
      <h1>Example using Variables</h1>
      <p>Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

然后，创建文件style.scss。

style.scss

$txtcolor:#008000;
$fontSize: 20px;

p{
   color:$txtcolor;
   font-size:$fontSize;
}

你可以通过使用以下命令通知 SASS 监视文件，并每当 SASS 文件更改时更新 CSS——

sass --watch C:\ruby\lib\sass\style.scss:style.css

然后，执行以上命令；它将自动使用以下代码创建style.css 文件——

style.css

p {
   color: #008000;
   font-size: 20px;
}

输出

让我们执行以下步骤，看看以上给出的代码如何工作——

将以上给出的 html 代码保存在variables.html 文件中。
在浏览器中打开此 HTML 文件，将显示如下输出。

sass_script.htm

打印页面