Bí kíp vw scss

·

1 min read

$spDesignWidth: 390;

@function floor-decimal($number, $digits: 0) { @return to-fixed($number, $digits, 'floor'); } @function to-fixed($number, $digits: 0, $round: 'round') { $n: 1; // $number must be a number @if type-of($number) != number { @warn '#{ $number } is not a number.'; @return $number; } // $digits must be a unitless number @if type-of($digits) != number { @warn '#{ $digits } is not a number.'; @return $number; } @else if not unitless($digits) { @warn '#{ $digits } has a unit.'; @return $number; } @for $i from 1 through $digits { $n: $n 10; } @if $round == 'round' { @return round($number $n) / $n; } @else if $round == 'ceil' { @return ceil($number $n) / $n; } @else if $round == 'floor' { @return floor($number $n) / $n; } @else { @warn '#{ $round } is undefined keyword.'; @return $number; } }

@function vw($size) { $vw: floor-decimal($size / $spDesignWidth * 100, 1); @return $vw + vw; }

=> responsive chỉ cần truyền pixel vào vw