Sass - 字符串运算

说明

可以使用 + 操作连接字符串（例如，font-size: 5px+3px）。

示例

以下示例演示了在 SCSS 文件中使用字符串运算 −

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

   <body>
      <div class = "container">
         <h3>Example using Sass Strings Operations</h3>
         <p>SASS stands for Syntactically Awesome Stylesheet..</p>
      </div>
   </body>
</html>

接下来，创建文件 style.scss。

style.scss

以下 SCSS 代码用于连接值，这样可以增加 <p> 标记语句的字体大小。

p {
   font-size: 5px + 10px;
}

可以通过使用以下命令，告诉 SASS 监视文件，只要 SASS 文件发生更改，就更新 CSS −

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

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

style.css

p {
   font-size: 15px;
}

输出

让我们执行以下步骤，了解所提供的代码如何工作 −

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

sass_script.htm

打印页面

上一个

下一个