sass-function/transform.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
69
70
71
72
73
$breakpoints-mobile : 767;
$viewport-tablet : 1024;
$breakpoints-tablet : 1366;

@function mobile-180($target) {
  $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) *2);
    }
  }
  @return $result;
}
@function vw-convert-ta($target) {
  $vw-content: ($viewport-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;
}

@function vw-mo($target) {
  $convert-result: mobile-180($target);
  @return $convert-result;
}
@function vw-convert($target) {
	$convert-result: vw-convert-ta($target);
	@return $convert-result;
}


@mixin transform($type, $size, $mode:'ta', $scale:null) {
  @if($mode=='mo') {
    $result-mo: vw-mo($size);
    @media (max-width: ($breakpoints-mobile +'px')) {
      transform: #{$type}#{unquote("(#{$result-mo})")} $scale;

    }
  }
  @if ($mode=='ta') {
    $result-ta: vw-convert($size);

    @media (min-width: $breakpoints-mobile+'px') and (max-width: ($viewport-tablet - 1+'px')) {
      transform: #{$type}#{unquote("(#{$result-ta})")} $scale;

    }

    @media (min-width: ($viewport-tablet+'px')) {
      transform: #{$type}#{unquote("(#{$size})")} $scale;

    }
  }
}

.selector {
		// color: red;
	@include transform('translate', 20px);
}