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

我想在Scss中使用两个自定义实用函数来优化与CSS相关的计算。编写一个返回字符串的Sass/Scss函数

一个在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%字符串。 （我认为这是我的字符串连接 - 即在计算结束时粘贴单位声明 - 但我不确定）

任何人都可以阐明我在做什么错？

来源

2012-07-29 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); 
}

来源

2012-07-29 15:35:27

谢谢艾曼使用，尽管这有些烦人。想想我会用pc（x，y）和em（x，y）作为带有减号的前缀函数名称可能会误导其他开发者。 – markedup 2012-07-29 16:35:15

对于任何想要这些但没有字符串输出的人的参考，只需用SASS插值语法包装返回值，例如： '@function -px-to-pc（$ wanted，$ parent）{ @return＃{（ $ wanted/$ parent）* 100）+'％'}; }' – 2013-02-05 00:46:43

谢谢，Jasmine，这是最好的解决方案 - 否则Sass似乎会将计算+并置作为字面引用字符串转储为CSS规则值！ – markedup 2013-05-16 13:10:24

-1

同样，我写了这个功能转换单元从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); 
}

来源

2015-07-01 21:39:55

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

回答

相关问题