scss 用Sass计算REM大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 用Sass计算REM大小相关的知识,希望对你有一定的参考价值。

// Take a px and convert to rem
@function calculateRem($values) {

	@if $supports-rem {
		$max: length($values);

		@if $max == 1 { @return convert-to-rem(nth($values, 1)); }

		$remValues: ();
		@for $i from 1 through $max {
			$remValues: append($remValues, convert-to-rem(nth($values, $i)));
		}
		@return $remValues;
	}
	@else {
		@return $values; //just use value we were provided
	}

}
@function convert-to-rem($size)  {
	$remSize: $size / $rem-base;
	@return $remSize * 1rem;
}

@mixin font-size($size) {
	font-size: calculateRem($size);
}

@mixin rem-size($attribute, $sizes) {
	#{$attribute}: calculateRem($sizes);
}

以上是关于scss 用Sass计算REM大小的主要内容,如果未能解决你的问题,请参考以下文章

scss Sass - Mixins:Rem字体大小

scss Sass mixin用于设置默认rem字体大小

scss 像素到REM sass mixin

scss SASS:REM Fallback Mixin

scss 用于REM和PX的SASS Mixin

scss 基于行高的基线网格SASS mixin,支持rem和px。显示在页面内容上方。按W切换