UNPKG

1.89 kBSCSSView Raw
1@import "variables";
2
3// ie : min-w:0
4@each $name, $value in $widths {
5 .w\:#{$name} {
6 width: $value;
7 }
8 .min-w\:#{$name} {
9 min-width: $value;
10 }
11 .max-w\:#{$name} {
12 max-width: $value;
13 }
14}
15
16// ie : max-w:sm
17@each $name, $value in $breakpoints {
18 .w\:#{$name} {
19 width: $value;
20 }
21 .min-w\:#{$name} {
22 min-width: $value;
23 }
24 .max-w\:#{$name} {
25 max-width: $value;
26 }
27}
28
29// ie: w:2/12
30@each $name, $value in $twelve-columns {
31 .w\:#{$name} {
32 width: $value;
33 }
34 .min-w\:#{$name} {
35 min-width: $value;
36 }
37 .max-w\:#{$name} {
38 max-width: $value;
39 }
40}
41
42@each $bpName, $bpValue in $breakpoints {
43 @each $name, $value in $widths {
44 .#{$bpName}\:w\:#{$name} {
45 @media (min-width: #{$bpValue}) {
46 width: $value;
47 }
48 }
49 .#{$bpName}\:min-w\:#{$name} {
50 @media (min-width: #{$bpValue}) {
51 min-width: $value;
52 }
53 }
54 .#{$bpName}\:max-w\:#{$name} {
55 @media (min-width: #{$bpValue}) {
56 max-width: $value;
57 }
58 }
59 }
60
61 @each $name, $value in $breakpoints {
62 .#{$bpName}\:w\:#{$name} {
63 @media (min-width: #{$bpValue}) {
64 width: $value;
65 }
66 }
67 .#{$bpName}\:min-w\:#{$name} {
68 @media (min-width: #{$bpValue}) {
69 min-width: $value;
70 }
71 }
72 .#{$bpName}\:max-w\:#{$name} {
73 @media (min-width: #{$bpValue}) {
74 max-width: $value;
75 }
76 }
77 }
78
79 @each $name, $value in $twelve-columns {
80 .#{$bpName}\:w\:#{$name} {
81 @media (min-width: #{$bpValue}) {
82 width: $value;
83 }
84 }
85 .#{$bpName}\:min-w\:#{$name} {
86 @media (min-width: #{$bpValue}) {
87 min-width: $value;
88 }
89 }
90 .#{$bpName}\:max-w\:#{$name} {
91 @media (min-width: #{$bpValue}) {
92 max-width: $value;
93 }
94 }
95 }
96}