Sass 数字运算符

2018-12-30 18:39 更新

描述

SASS允许诸如加法,减法,乘法和除法的数学运算。您不能使用不兼容的单位,如px * px或添加数字与px和em导致生成无效的CSS。因此,如果在CSS中使用无效单位,SASS将显示错误。 SASS支持关系运算符,如<,>,<=,> =和等于运算符= =,!=。

除法 和 /

SASS允许对数字进行除法运算(/),就像在普通CSS中一样。您可以在三种情况下使用除法(/)操作

  • 如果值存储在变量中或由函数返回。

  • 如果圆括号在列表之外,值在里面,在这种情况下,值也将被括号括起来。

  • 如果value是算术表达式的一部分。

减法,负数和 -

使用SASS可以执行一些操作,例如减去数字(10px - 5px),负数(-5),一元取反运算符( - $ myval)或使用标识符(font-size)。在某些情况下,这些是有用的:

  • 你可以使用空格两边 - 当执行数字减法

  • 你可以在 - 之前使用空格,但不能在负数之后或一元否定

  • 你可以在用空格分隔的括号内包含一元否定(5px( - $ myval))

有一些与 - 相关的意义,如下所示:

  • 它可以在标识符中使用,如font-size和Sass只允许有效的标识符。

  • 它可以用于两个数字,没有空格。装置10-5类似于10-5。

  • 它可以用作负数(-5)的开始。

  • 它可以在不考虑空间的情况下使用,如5 - $ myval类似于5 - $ myval。

  • 它可以用作一元否定运算符( - $ myval)。

例子

下面的例子演示了在SCSS文件中使用数字操作:

<html>
<head>
   <title>Number Operations</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:\ruby\lib\sass\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文件,将显示如下输出。

Sass Operations
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号