Sass数字运算符

SASS允许数学运算,如加,减,乘和除。可以使用不兼容的单位,比如px * px或同时加入一些与PX和EM导致产生无效的CSS。所以,如果在CSS中使用无效的单位,SASS将显示错误。SASS支持关系运算符如<,>,<=,>=和等于运算符 ==,!=。

除法和 /

SASS允许在数字除法运算(/)在正常的CSS中。可以用除法(/)运行以下三种情况。
  • 如果值存储在一个变量或由函数返回。
  • 如果括号是列表之外及值就在里面,在这样的情况下,值也将用括号括起来。
  • 如果值为算术表达式的一部分。

减法,负号,和 -

使用SASS可以执行一些操作,如数字(10px- 5px)的减法,负数(-5),一元取反运算符(-$myval)或使用标识符(字体大小)。在一些情况下,这些是有用的,如:
  • 可以使用两侧空格 - 执行数字相减时
  • 可以使用前空格 - ,但毕竟不是负数或一元取反
  • 可以附上括号用空格隔开一元取反(5px (-$myval))
还有相关的一些含义 - 具体如下:
  • 它可以在标识符使用,如字体大小和Sass只允许有效的标识符。
  • 它可以用于两个数没有空格。意味着10-5 类似于 10 - 5。
  • 它可以作为一个负数(-5)开始。
  • 它可用于不考虑空间,例如5-$myval类似于5 - $myval。
  • 它可以用来作为一元取反运算符(-$myval)。

示例

下面的例子演示了SCSS文件使用数字的操作:
<html>
<head><meta charset="UTF-8"> <title>数字运算符 - www.e-learn.cn</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">
   <p class="para1">SASS stands for Syntactically Awesome Stylesheet..</p>
   <h2>Hello...Welcome to Sass</h2>
   <h3>Hello...Welcome to Sass</h3>
   <p class="para2">Hello...Welcome to Sass</p>
   </div>
</body>
</html>
接下来,创建文件style.scss。

style.scss

$size: 25px;
h2{
   font-size: $size + 5;
}
h3{
   font-size: $size / 5;
}
.para1 {
   font-size: $size * 1.5;
}
.para2 {
   font-size: $size - 10;
}
告诉SASS监视文件,并使用下面的命令随时更新SASS文件来修改CSS:
sass --watch C:\Ruby22-x64\style.scss:style.css
接着执行上面的命令,它会自动创建 style.css 文件,如下面的代码:

style.css

h2 {
  font-size: 30px;
}
h3 {
  font-size: 5px;
}
.para1 {
  font-size: 37.5px;
}
.para2 {
  font-size: 15px;
}

执行输出结果

让我们来执行以下步骤,看看上面的代码工作:
  • 保存上述的HTML代码到 number_operations.html 文件。
  • 在浏览器中打开该HTML文件,输出如下得到显示。