編寫一個返回字符串的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函數

回答

相關問題