SASS
2019.09.20 16:54

Sass @each

조회 수 2285 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
$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;
}

 

 

?

List of Articles
번호 분류 제목 날짜 조회 수
19 SASS Sass @while 2019.09.20 3037
18 SASS Sass @for 2019.09.20 2590
» SASS Sass @each 2019.09.20 2285
16 SASS Sass @if and @else 2019.09.20 2630
15 SASS Sass Operators 2019.09.20 2402
14 SASS Sass Introspection Functions 2019.09.19 2268
13 SASS Sass Color Functions 2019.09.19 2446
12 SASS Sass Selector Functions 2019.09.19 2075
11 SASS Sass Map Functions 2019.09.19 2254
10 SASS Sass List Functions 2019.09.19 2436
9 SASS Sass Numeric Functions 2019.09.19 2200
8 SASS Sass String Functions 2019.09.19 3521
7 SASS Sass @extend 2019.09.19 2156
6 SASS Sass @mixin과 @include 2019.09.19 2741
5 SASS Sass @import 2019.09.19 2197
4 SASS Sass 중첩 규칙과 속성 2019.09.19 2224
3 SASS Sass 변수 2019.09.19 2012
2 SASS Sass 소개 2019.09.19 9642
1 SASS SASS 샘플 2019.08.16 2629
Board Pagination Prev 1 Next
/ 1