Bí kíp vw scss
$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