sass function not working

Question

Any suggestion related to code will be appreciated :)

function str-remove-alphabet():- this function takes one string as an argument.and remove any alphabet in that string.and return an int value.

// 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.                    
  }                                                                 
 }                                                                   
}

function font-size():- this function takes two argument. 1.font-size and 2. unit. and converts font-size (eg 15px) and convert it into (eg 15) using str-remove-alphabet function. after successful return it start calculating font-size into given unit(eg 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                           
 }                                                                            

}

problem :- i am unable to call str-remove-alphabet() inside of font-size().

score 2 · Accepted Answer · answered Apr 20 '17 at 11:03

I’m not sure what you are aiming for with your str-remove-alphabet($string) function but it looks like a simple strip-unit to me.

Also make sure that you don't pass your values as strings, otherwise you have to unquote them if you want to use them in arithmetic operations.

I have highlighted everything I changed with an ⚠️.

/// 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
    }
}

So if you run it like that:

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

It should work!

score 1 · Answer 2 · answered Apr 20 '17 at 10:48

The function str-remove-alphabet is most likely not doing what is desired, since for example when the first character in list-alphabet does not match it returns the whole string without checking the remaining characters... Similarly, when it finds the first matching character, it replaces it everywhere in the string and returns the result. So if $list-alphabets: "p" "x";, then an input 17px would produce 17x.

I suppose you meant something like (the str-index is not necessary since it's called by str-replace anyway):

@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;
}

sass function not working

2 Answers2