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