sass-function/pwtovw.scss at master · jiimy/sass-function · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$breakpoints-tablet : 1366;
$breakpoints-mobile : 768;

@function pxtovw-mo($target) {
  $vw-content: ($breakpoints-mobile * 0.01) * 1px;
  $result: ();
  $length: length($target);

  @for $i from 1 through $length {
    $result: append($result, nth($target, $i) / $vw-content +vw);
  }

  @return $result;
}

@function pxtovw-ta1366($target) {
  $vw-content: ($breakpoints-tablet * 0.01) * 1px;
  $result: ();
  $length: length($target);

  @for $i from 1 through $length {
			@if(type-of(nth($target, $i)) == string) {
				$result: append($result, nth($target, $i));
			}
			@else {
    $result: append($result, nth($target, $i) / $vw-content +vw);
			}
  }

  @return $result;
}

@mixin pxtovw-1366($value, $size, $mode:'ta', $flag:'false') {

  // mo
  @if ($mode=='mo') {
    @media (max-width: $breakpoints-mobile + 'px') {
      @if($flag==true) {
        #{$value}: pxtovw-mo($size) !important;
      }

      #{$value} : pxtovw-mo($size);
    }
  }

  //tablet
  @if ($mode=='ta') {
    @media (min-width: $breakpoints-mobile + 1 + 'px') and (max-width: ($breakpoints-tablet +'px')) {
      @if($flag==true) {
        #{$value}: pxtovw-ta1366($size) !important;
      }
      #{$value} : pxtovw-ta1366($size);
    }

    //pc
    @media (min-width: ($breakpoints-tablet+'px')) {
      @if($flag==true) {
        #{$value}: $size !important;
      }
      #{$value} : $size;
    }
  }
}

p {
  @include pxtovw-1366(font-size, 30px);
  @include pxtovw-1366(margin, 20px 10px auto);
}