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

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 );
}

这将自动为你提供以下CSS代码：

.navbar {
  left: 5px;
  transition: left 0.1s;
}
.navbar:hover {
  left: 10px;
}

.button {
  left: 2px;
  transition: left 0.06s;
}
.button:hover {
  left: 5px;
}

---