如何创建calc mixin作为表达式传递以生成标签？

CSS

泡芙逆天

2020-03-19

我正在处理一个Sass样式表，在其中我希望使用该calc元素来动态调整某些内容的大小。由于calc元素尚未规范，我需要为目标calc()，-moz-calc()和-webkit-calc()。

有没有一种方法可以创建可将表达式传递给的mixin或函数，以便生成所需的标签，然后将其设置为a width或height？

第2308篇《如何创建calc mixin作为表达式传递以生成标签？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Gil米亚卡卡西 2020.03.19

它将是带有参数的基本mixin，幸运的是，表达式在受支持的范围内不是特定于浏览器的：

@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

.test {
  @include calc(width, "25% - 1em");
}

将呈现为

.test {
  width: -webkit-calc(25% - 1em);
  width: calc(25% - 1em);
}

当不支持calc时，您可能需要包括一个“默认”值。

小宇宙理查德 2020.03.19

另一种写法：

@mixin calc($prop, $val) {
  @each $pre in -webkit-, -moz-, -o- {
    #{$prop}: $pre + calc(#{$val});
  } 
  #{$prop}: calc(#{$val});
}

.myClass {
  @include calc(width, "25% - 1em");
}

我认为这是一种更优雅的方式。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android