scss 用于REM和PX的SASS Mixin

Posted 2021-05-18

/**
 * Parse an Integer in scss
 * @param   {String}  $n
 * @return  {Integer}
 */
@function parse-int($n) {
	@return $n / ($n * 0 + 1);
}

/**
 * Mixin for calculating Rems with Px fallback. Thanks to hugogiraudel
 * @param   {String}  $property  the property ex: font-size
 * @param   {Object}  $values    the values (can be single or multiple) ex: 1rem 1rem 0
 */
@mixin rem($property, $values) {
	$px : ();
	$rem: ();
	@each $value in $values {
		@if $value == 0 or type-of($value) != "number" {
			$px : append($px , $value);
			$rem: append($rem, $value);
		}
		@else {
			$unit: unit($value);
			$val: parse-int($value);
			@if $unit == "px" {
				$px : append($px,  $value);
				$rem: append($rem, ($val / 10 + rem));
			}
			@if $unit == "rem" {
				$px : append($px,  ($val * 10 + px));
				$rem: append($rem, $value);
			}
		}
	}
	@if $px == $rem { 
		#{$property}: $px;
	} @else {
		#{$property}: $px;
		#{$property}: $rem; 
	}
}