问题编写一个返回字符串的Sass / Scss函数

我正在尝试使用Scss中的两个自定义实用程序函数来优化与CSS相关的计算。

EMs的一个：

@function _em($wanted, $inherited) {
  @return ($wanted / $inherited) + 'em';
}

......和另一个百分比：

@function _pc($wanted, $parent) {
  @return (($wanted / $parent) * 100) + '%';
}

...然后将它们称为内联：

body {
  margin: _pc(40,1024);
  font-size: _em(20,16);
  line-height: _em(26,20);
}

这些都没有回归预期 Nem 要么 N% 但是，字符串。 （我认为这是我的字符串连接 - 即在计算结束时粘合单位声明 - 但我不确定。）

任何人都可以解释我做错了什么吗？

2743

2017-07-29 15:22

起源

答案:

实际上，你的问题是mixin的名字。我自己刚刚发现了这个，但显然你不能用下划线开始混音。

这有效： http://jsfiddle.net/B94p3/

@function -em($wanted, $inherited) {
  @return ($wanted / $inherited) + 'em';
}

@function -pc($wanted, $parent) {
  @return (($wanted / $parent) * 100) + '%';
}

p {
    font-size: -em(40,16);
}

2017-07-29 15:35

谢谢艾曼，虽然这有点烦人。想想我只会使用pc（x，y）和em（x，y）作为前缀函数名称，减号可能会误导其他开发者。 - markedup

对于想要这些但没有字符串输出的任何人的参考，只需用SASS插值语法包装返回值，例如： @function -px-to-pc($wanted, $parent) { @return #{(( $wanted / $parent ) * 100 ) + '%'}; } - Jasmine Hegman

谢谢，Jasmine，这是最好的解决方案 - 否则Sass似乎将计算+连接转储为文字引用字符串作为CSS规则值！ - markedup

答案:

实际上，你的问题是mixin的名字。我自己刚刚发现了这个，但显然你不能用下划线开始混音。

这有效： http://jsfiddle.net/B94p3/

@function -em($wanted, $inherited) {
  @return ($wanted / $inherited) + 'em';
}

@function -pc($wanted, $parent) {
  @return (($wanted / $parent) * 100) + '%';
}

p {
    font-size: -em(40,16);
}

2017-07-29 15:35

谢谢艾曼，虽然这有点烦人。想想我只会使用pc（x，y）和em（x，y）作为前缀函数名称，减号可能会误导其他开发者。 - markedup

谢谢，Jasmine，这是最好的解决方案 - 否则Sass似乎将计算+连接转储为文字引用字符串作为CSS规则值！ - markedup

同样，我写了这个函数来转换单位 px 至 rem。

你可以相应地修改。

$is-pixel: true;
$base-pixel: 16;

@function unit($value) {
  @if $is-pixel == true {
    $value: #{$value}px;
  } @else {
    $value: #{$value/$base-pixel}rem;
  }
  @return $value;
}

现在，可以使用如下

.my-class {
  width: unit(60);
  height: unit(50);
}

-1

2017-07-01 21:39

问题 编写一个返回字符串的Sass / Scss函数

答案:

答案:

热门问题

问题编写一个返回字符串的Sass / Scss函数