Sass, mobile first, Recipe Challenge

Community feedback

• 

  P

  kephalosk•260

  @kephalosk

  Posted 3 months ago

  Looks nice :) On this challenge I tried to create a to-rem()-function on my own. So, I had a look at yours. I see you returning an error when units are used in your rem()-function.

  @use 'sass:math';
  
  //convert pixel to rem
  @function rem($pixel) {
  	//test to see if a unit is accidentally included as part of the $pixel parameter. $pixel can ONLY be a number
  	@if math.is-unitless($pixel) {
  		//divide $pixel by 16 to return value, concatenate "rem" to set unit of measurment as rems
  		@return math.div($pixel, 16) + rem;
  	} @else {
  		@error 'Don\'t use units when using the rem() function; only numbers';
  	}
  }
  

  You could improve the usability of the function for others by allowing at least px, maybe even % or rem itself. Plus your rem() could get even more stable if you catch non-allowed types like strings in an early return at the beginning, e.g.:

  @use "sass:math";
  @use "sass:meta";
  
  //convert pixel to rem
  @function rem($value) {
    @if meta.type-of($value) != "number" {
      @error "NaN: #{type-of($value)}.";
      @return null;
    }
  
    //test to see if a unit is accidentally included as part of the $pixel parameter. $pixel can ONLY be a number
    @if math.is-unitless($value) {
      //divide $pixel by 16 to return value, concatenate "rem" to set unit of measurment as rems
      @return math.div($value, 16) + rem;
    }
  
    $unit: math.unit($value);
  
    @if $unit == "px" {
      @return math.div($value, 16px) * 1rem;
    }
  
    @if $unit == "%" {
      @return math.div($value, 100%) * 1rem;
    }
  
    @if $unit == "rem" {
      @return $value;
    }
  
    @error "Invalid unit: #{$unit}.";
    @return null;
  }
  

  The same things could of course also be transferred to your em()-function.

  01

  Marked as helpful