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.xuhuhu.com</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文件，输出如下得到显示。
