锐客网

  1. 首页 > 睿知 > it技术 > >

SASS如何使用数值运算符（详细介绍和代码实例）

IT知识运算符重载数值运算符自动转换

Sass支持标准数学数值运算符。它们可以在兼容的单位之间自动转换, 例如分钟可以加几秒钟, 它们将被自动转换。
数值运算符：

  • < 表达式> +< expression> 运算符将两个值或表达式相加, 或者可以说将第一个值添加到第二个值。
  • < 表达式> –< expression> 运算符减去来自第二个的第一个值。这需要记住。
  • < 表达式> *< expression> 运算符将两个值相乘。
  • < 表达式> /< expression> 运算符将第一个值除以第二个值。
  • < 表达式> %< expression> 运算符返回第一个值除以第二个值的余数。也被称为模运算符。
例子：
@debug 20px + 10px

输出如下：30像素
@debug 5 s - 20 s

输出如下：15秒
@debug 10px * 2px

输出如下：20px * px(你将了解px * px本文稍后)
@debug 10px / 2px

输出如下：5像素
@debug 2 in / 5px

输出如下：0.0208(1in == 96px)
  • 无单位数可以与任何单位编号一起使用。
例子：
@debug 20px + 7

输出如下：27像素
@debug 4 s * 10

输出如下：40多岁
  • 具有不同或可以说不兼容单位的数字不能加, 减或用于模运算符。
例子：
@debug 10 s - 5px

输出如下：错误：单位和像素的不兼容
一元运算符：
你也可以使用+和–作为一元运算符, 你需要一个简单的表达式。
  • + < 表达式> 返回值, 而不更改它。
  • – < expression> 返回值为负值。
例子：
@debug +( 5 s + 4 s)

输出如下：9s
@debug -( 6 s + 3 s)

输出如下：-9秒
@debug -( 3 s - 4 s)

输出如下：-1秒
单位：
Sass具有很大的能力, 可以根据他们在日常生活(现实生活)中的使用来操纵这些单元。这意味着当两个数字相乘时, 它们的单位将与值相乘, 而相除的情况相同。通过这些, 你将了解更多例子：
@debug 4px * 6px

输出如下：24px * px
@debug 10px / 2 s

输出如下：5px /秒
@debug 10px * 4 s * 2em / 2 deg

输出如下：40 px * s * em / deg
$pixels-per-second : 10px /s @debug $pixels-per-second

输出如下：10px /秒
@debug 1 /$pixels-per-second

输出如下：0.1秒/像素
就像这样, 如果这些单元兼容并且划分, 它们将被取消：
@debug 1 in / 96px

输出如下：1
实际实施：
上述运算符可用于使CSS轻松快速地工作。
例子：
你无需提供播放速度。对于每个组件, 你都可以创建一个Sass, 该Sass为你所需的每个组件提供CSS。
Sass代码：
$speed: 1 s/ 50px ; @mixin show ($start, $stop) { left : $start; transition: left ($stop - $start) * $speed; & :hover { left : $stop; } }.navbar { @include show ( 5px , 10px ); }.button { @include show ( 2px , 5px ); }

【SASS如何使用数值运算符（详细介绍和代码实例）】这将自动为你提供以下CSS代码：
.navbar {left: 5px; transition: left 0.1s; }.navbar:hover {left: 10px; }.button {left: 2px; transition: left 0.06s; }.button:hover {left: 5px; }

    推荐阅读


    上一篇：PHP如何使用array_chunk()函数（代码示例）

    下一篇：算法设计（如何检查两个相同的链表（））