SASS
2019.09.20 16:54
Sass @each
조회 수 2444 추천 수 0 댓글 0
$sizes: 40px, 50px, 80px; @each $size in $sizes { .icon-#{$size} { font-size: $size; height: $size; width: $size; } }
.icon-40px { font-size: 40px; height: 40px; width: 40px; } .icon-50px { font-size: 50px; height: 50px; width: 50px; } .icon-80px { font-size: 80px; height: 80px; width: 80px; }
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f"); @each $name, $glyph in $icons { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $glyph; } }
@charset "UTF-8"; .icon-eye:before { display: inline-block; font-family: "Icon Font"; content: ""; } .icon-start:before { display: inline-block; font-family: "Icon Font"; content: ""; } .icon-stop:before { display: inline-block; font-family: "Icon Font"; content: ""; }
$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px; @each $name, $glyph, $size in $icons { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $glyph; font-size: $size; } }
@charset "UTF-8"; .icon-eye:before { display: inline-block; font-family: "Icon Font"; content: ""; font-size: 12px; } .icon-start:before { display: inline-block; font-family: "Icon Font"; content: ""; font-size: 16px; } .icon-stop:before { display: inline-block; font-family: "Icon Font"; content: ""; font-size: 10px; }
번호 | 분류 | 제목 | 날짜 | 조회 수 |
---|---|---|---|---|
41 | SASS | Sass @while | 2019.09.20 | 3238 |
40 | SASS | Sass @for | 2019.09.20 | 2747 |
» | SASS | Sass @each | 2019.09.20 | 2444 |
38 | SASS | Sass @if and @else | 2019.09.20 | 3222 |
37 | SASS | Sass Operators | 2019.09.20 | 2607 |
36 | SASS | Sass Introspection Functions | 2019.09.19 | 2421 |
35 | SASS | Sass Color Functions | 2019.09.19 | 3608 |
34 | SASS | Sass Selector Functions | 2019.09.19 | 2241 |
33 | SASS | Sass Map Functions | 2019.09.19 | 2377 |
32 | SASS | Sass List Functions | 2019.09.19 | 2613 |
31 | SASS | Sass Numeric Functions | 2019.09.19 | 2367 |
30 | SASS | Sass String Functions | 2019.09.19 | 3713 |
29 | SASS | Sass @extend | 2019.09.19 | 2290 |
28 | SASS | Sass @mixin과 @include | 2019.09.19 | 2998 |
27 | SASS | Sass @import | 2019.09.19 | 2341 |
26 | SASS | Sass 중첩 규칙과 속성 | 2019.09.19 | 2360 |
25 | SASS | Sass 변수 | 2019.09.19 | 2141 |
24 | SASS | Sass 소개 | 2019.09.19 | 13118 |
23 | SASS | SASS 샘플 | 2019.08.16 | 2872 |
22 | HTML | ::after ::before 토글 사용 예제 | 2019.06.28 | 3141 |