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

2021年3月18日14:44:56 发表评论 635 次浏览

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

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: