萨斯功能不起作用答案

【问题标题】：sass function not working萨斯功能不起作用
【发布时间】：2017-09-16 22:24:45
【问题描述】：

我们将不胜感激任何与代码相关的建议 :)

函数str-remove-alphabet()：- 此函数将一个字符串作为参数。并删除该字符串中的任何字母。并返回一个 int 值。

// 3.str-alpha-remove function. removes alphabet from given string.   
@function str-remove-alphabet($string) {                              
// local variables.                                                 
// loop alphabets list to index occurence of alphabets in string    
@each $i in $list-alphabets {                                       
// if occurence found.                                            
  @if(str-index($string, $i)) {                                     
    $string: str-replace($string, $i, '');                          
    @return $string; // than replace that character with null.      
  } @else {                                                         
    @return $string; // otherwise return string.                    
  }                                                                 
 }                                                                   
}

函数font-size()：- 这个函数有两个参数。 1.font-size 和 2.unit。并转换字体大小（例如 15px）并使用 str-remove-alphabet 函数将其转换为（例如 15）。成功返回后，它开始计算字体大小到给定的单位（例如 1.223342rem）。

// 1.font-size calculator based on font-size given and unit.                   

//noinspection CssInvalidFunction                                              

@function font-size($size, $unit: 'em') {                                      
$size: str-remove-alphabet('17px');                                          
$base-font: str-remove-alphabet('15px');                                     
 @if($unit == 'em') {                                                         
   $font-size: ($size / $base-font) em;                                       
   @debug $font-size;                                                         
   @return $font-size; // returns font-size in em format                      
 } @else if($unit == 'per') {                                                 
   $font-size: ($size / $base-font) * 100%;                                   
   @debug $font-size;                                                         
   @return $font-size; // returns font-size in percentage format              
 } @else {                                                                    
   $font-size: ($size / $base-font) * 1rem;                                   
   @debug $font-size;                                                         
   @return $font-size; // else return in rem format                           
 }                                                                            

}

问题：- 我无法在 font-size() 中调用 str-remove-alphabet()。

【问题讨论】：

标签： javascript jquery sass scss-lint

【解决方案1】：

我不确定您使用 str-remove-alphabet($string) 函数的目的是什么，但对我来说它看起来像一个简单的 strip-unit。

还要确保不要将值作为字符串传递，否则如果要在算术运算中使用它们，则必须unquote。

我用 ⚠️ 突出显示了我更改的所有内容。

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

@function font-size($size, $unit: "em") {
    $size: strip-unit($size); // ⚠️ using strip-unit
    $base-font: strip-unit(15px); // ⚠️ using strip-unit
    @if($unit == "em") {
        $font-size: ($size / $base-font) * 1em; // ⚠️ * was missing
        @debug $font-size;
        @return $font-size; // returns font-size in em format
    } @else if($unit == "per") {
        $font-size: ($size / $base-font) * 100%;
        @debug $font-size;
        @return $font-size; // returns font-size in percentage format
    } @else {
        $font-size: ($size / $base-font) * 1rem;
        @debug $font-size;
        @return $font-size; // else return in rem format
    }
}

所以如果你这样运行它：

.test {
  font-size: font-size(12px, "per"); // ? 80%
}

应该可以了！

【讨论】：

【解决方案2】：

函数str-remove-alphabet 很可能没有执行所需的操作，因为例如，当list-alphabet 中的第一个字符不匹配时，它会返回整个字符串而不检查剩余的字符...类似地，当它找到第一个匹配的字符，它在字符串中的任何地方替换它并返回结果。所以如果$list-alphabets: "p" "x";，那么输入17px会产生17x。

我想你的意思是这样的（str-index 不是必需的，因为它是由str-replace 调用的）：

@function str-remove-alphabet($string) {

 //$list-alphabets: "p" "x";

 // local variables.                                                 
 // loop alphabets list to index occurence of alphabets in string    
 @each $i in $list-alphabets {                                       
    $string: str-replace($string, $i, '');
 }
 @return $string;
}

【讨论】：