淘先锋技术网

首页 1 2 3 4 5 6 7

Sass 数字运算符 - Sass教程 - 编程基础教程

描述

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><linkrel="stylesheet"type="text/css"href="style.css"/><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><body><divclass="container"><pclass="para1">SASS stands for Syntactically Awesome Stylesheet..</p><h2>Hello...Welcome to Sass</h2><h3>Hello...Welcome to Sass</h3><pclass="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