Sass[SCSS] 기초 이론 8 - @if @else 조건문 / @for, @each 반복문

2023. 2. 14.

by. kimyang-Sun

Sass[SCSS] 기초 이론 8 - @if @else 조건문 / @for, @each 반복문 을 알아볼게요.

@if, @else 조건문

우선 @if @else 조건문인데 자바스크립트와 사용방식은 같습니다.

어렵지 않은데 바로 예시 코드를 볼게요.

@mixin ellipsis($lines: 1) {
  @if ($lines == 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
}

.line1 {
  @include ellipsis(1); /* 1줄 말줄임 */
}
.line2 {
  @include ellipsis(2); /* 2줄 말줄임 */
}
.line3 {
  @include ellipsis(3); /* 3줄 말줄임 */
}

text ellipsis 에 사용되는 코드를 @if, @else 조건문을 이용하여 처리해준 코드입니다. 정말정말 자주 쓰여요. :)

아래는 컴파일된 css 코드입니다.

@charset "UTF-8";
.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 1줄 말줄임 */
}

.line2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* 2줄 말줄임 */
}

.line3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* 3줄 말줄임 */
}

코드펜 예시!

See the Pen Sass[SCSS] 활용 - @if 조건문 예제 (text ellipsis) by kimyangsun (@kimyangsun) on CodePen.

@for, @each 반복문

이것도 사용방식은 자바스크립트와 거의 유사합니다. @for 코드 먼저 볼게요. :)

$color: royalblue;

// @for
.item-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  .item {
    width:100px;
    height:100px;
    @for $i from 1 through 10 {
      &:nth-child(#{$i}){
        background-color: darken($color , $i * 4%);
      }
    }
  }
}

nth-child 순서대로 darken()을 이용해서 배경색을 점점 어둡게 준 코드입니다.

@for {반복자} from {시작} through {끝} 이런식으로 사용해주면 되는데, through 대신에 to를 사용해도 되지만 보통은 through를 사용합니다. 차이는

@for $i from 1 through 10 이면 1~10까지 반복되는거고,

@for $i from 1 to 10 이면 1~9까지 반복됩니다.

아래와 같이 컴파일된 css를 확인할 수 있습니다. (nth-child 10개의 코드를 반복문 하나로 줄 수 있습니다.)

.item-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.item-list .item {
  width: 100px;
  height: 100px;
}
.item-list .item:nth-child(1) {
  background-color: #2f5bde;
}
.item-list .item:nth-child(2) {
  background-color: #224fd7;
}
.item-list .item:nth-child(3) {
  background-color: #1f49c6;
}
.item-list .item:nth-child(4) {
  background-color: #1c42b4;
}
.item-list .item:nth-child(5) {
  background-color: #1a3ca2;
}
.item-list .item:nth-child(6) {
  background-color: #173591;
}
.item-list .item:nth-child(7) {
  background-color: #142f7f;
}
.item-list .item:nth-child(8) {
  background-color: #11286e;
}
.item-list .item:nth-child(9) {
  background-color: #0f225c;
}
.item-list .item:nth-child(10) {
  background-color: #0c1b4a;
}

See the Pen Sass[SCSS] 활용 - @for 반복문 예제 by kimyangsun (@kimyangsun) on CodePen.

다음은 @each 입니다. 바로 예시 코드볼게요 :)

/* @each(list) */
.item-list {
  $colors: (crimson, royalblue, gold); /* value값만 지정해줌 */
  
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  .item {
    width: 100px;
    height: 100px;
    @each $color in $colors {
      &.item-#{$color} {
        background-color: $color; /* 각각 value값 사용 */
      }
    }
  }
}

/* @each(map) */
.item-list2 {
  $colors: ( /* key, value값 둘다 지정해줌 */
    crimson: '붉은색',
    royalblue: '푸른색',
    gold: '금색'
  );
  
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    @each $color, $name in $colors { /* 각각 key와 value값 둘다 사용 */
      &.item-#{$color} {
        background-color: $color;
        &::before {
          content: $name;
        }
      }
    }
  }
}

each 의 사용방식은 @each $변수 in 리스트 또는 맵 데이터 { //반복 내용 } 입니다.

each는 list와 map 두개의 형식이 있는데 list 데이터 형식은 value값들로 이루어져 있어 그대로 사용할 수 있는 방식이고

map 데이터 형식은 객체처럼 key와 value값들을 전부 지정해줘서 key값, value값 전부를 사용할 수 있는 방식입니다.

자바스크립트의 for in문과 비슷합니다. 아래와 같이 컴파일된 css를 확인할 수 있습니다.

@charset "UTF-8";
.item-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.item-list .item {
  width: 100px;
  height: 100px;
}
.item-list .item.item-crimson {
  background-color: crimson;
}
.item-list .item.item-royalblue {
  background-color: royalblue;
}
.item-list .item.item-gold {
  background-color: gold;
}

.item-list2 {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.item-list2 .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}
.item-list2 .item.item-crimson {
  background-color: crimson;
}
.item-list2 .item.item-crimson::before {
  content: "붉은색";
}
.item-list2 .item.item-royalblue {
  background-color: royalblue;
}
.item-list2 .item.item-royalblue::before {
  content: "푸른색";
}
.item-list2 .item.item-gold {
  background-color: gold;
}
.item-list2 .item.item-gold::before {
  content: "금색";
}

See the Pen Sass[SCSS] 활용 - @each 반복문 예제 by kimyangsun (@kimyangsun) on CodePen.

코드펜 코드를 보면 이해가 빠르게 되실거라 생각합니다.

마지막으로 조건문과 반복문을 섞어서 사용한 유용한 예시인 background-position 반복 구분을 사용해보도록 할게요.

.item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  .item {
    .icon {
      $_size: 70px;
      $_length: 30;
      display: inline-block;
      width: $_size;
      height: $_size;
      background: url(https://i.ibb.co/F7yx621/ir-ic.png) no-repeat;
      @for $i from 0 through ($_length - 1) {
        &.icon#{$i + 1} {
          @if ($i < 10){
            background-position:-($_size + 10px)*$i 0;
          }
          @else if ($i < 20){
            background-position:-($_size + 10px)*($i - 10) ($_size + 10px)*-1;
          }
          @else if ($i < 30){
            background-position:-($_size + 10px)*($i - 20) ($_size + 10px)*-2;
          }
        }
      }
    }
  }
}

보통 아이콘 이미지들을 이용할때 하나의 이미지에 background-position으로 구분해주어 각각 다른 아이콘을 보여주는 방식을 많이 사용하는데,

그때 유용하게 사용할 수 있는 코드입니다.

한줄에 아이콘 10개씩 들어가는 이미지에 크기는 너비 70px, 높이 70px 이고 간격은 10px 씩 있는 상태입니다.

아래 css가 컴파일된걸 보면 background-position 값들이 잘 들어간걸 확인할 수 있습니다.

.item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.item-list .item .icon {
  display: inline-block;
  width: 70px;
  height: 70px;
  background: url(https://i.ibb.co/F7yx621/ir-ic.png) no-repeat;
}
.item-list .item .icon.icon1 {
  background-position: 0px 0;
}
.item-list .item .icon.icon2 {
  background-position: -80px 0;
}
.item-list .item .icon.icon3 {
  background-position: -160px 0;
}
.item-list .item .icon.icon4 {
  background-position: -240px 0;
}
.item-list .item .icon.icon5 {
  background-position: -320px 0;
}
.item-list .item .icon.icon6 {
  background-position: -400px 0;
}
.item-list .item .icon.icon7 {
  background-position: -480px 0;
}
.item-list .item .icon.icon8 {
  background-position: -560px 0;
}
.item-list .item .icon.icon9 {
  background-position: -640px 0;
}
.item-list .item .icon.icon10 {
  background-position: -720px 0;
}
.item-list .item .icon.icon11 {
  background-position: 0px -80px;
}
.item-list .item .icon.icon12 {
  background-position: -80px -80px;
}
.item-list .item .icon.icon13 {
  background-position: -160px -80px;
}
.item-list .item .icon.icon14 {
  background-position: -240px -80px;
}
.item-list .item .icon.icon15 {
  background-position: -320px -80px;
}
.item-list .item .icon.icon16 {
  background-position: -400px -80px;
}
.item-list .item .icon.icon17 {
  background-position: -480px -80px;
}
.item-list .item .icon.icon18 {
  background-position: -560px -80px;
}
.item-list .item .icon.icon19 {
  background-position: -640px -80px;
}
.item-list .item .icon.icon20 {
  background-position: -720px -80px;
}
.item-list .item .icon.icon21 {
  background-position: 0px -160px;
}
.item-list .item .icon.icon22 {
  background-position: -80px -160px;
}
.item-list .item .icon.icon23 {
  background-position: -160px -160px;
}
.item-list .item .icon.icon24 {
  background-position: -240px -160px;
}
.item-list .item .icon.icon25 {
  background-position: -320px -160px;
}
.item-list .item .icon.icon26 {
  background-position: -400px -160px;
}
.item-list .item .icon.icon27 {
  background-position: -480px -160px;
}
.item-list .item .icon.icon28 {
  background-position: -560px -160px;
}
.item-list .item .icon.icon29 {
  background-position: -640px -160px;
}
.item-list .item .icon.icon30 {
  background-position: -720px -160px;
}

See the Pen Sass[SCSS] 활용 - @for 반복문 + @if 조건문 예제 (background-position) by kimyangsun (@kimyangsun) on CodePen.

마지막 코드펜 예시입니다. :)

@while 반복문도 있지만 잘못된 조건을 넣으면 무한루프가 빠져 컴파일 오류가 나기에 보통은 직관성이 좋은 @for, @each만 사용해줘도 됩니다. :)

'코딩 기록 > Sass [SCSS]' 카테고리의 다른 글

Sass[SCSS] 기초 이론 7 - @function 함수, @return 반환 (0)	2023.02.14
Sass[SCSS] 활용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($다중 변수, @mixin, @content 등을 이용) (0)	2023.02.12
Sass[SCSS] 기초 이론 6 - 다중 변수 선언, 내장 함수(map-get) (0)	2023.02.12
Sass[SCSS] 기초 이론 5 - 그룹 선언하기, 사용하기, 선택자 속성 사용 (@mixin, @include, @extend) (0)	2023.02.12
Sass[SCSS] 기초 이론 4 - scss에서 연산자 사용하기 (Operations & calc) (0)	2023.02.05

맨 위로

나의 코딩 기록
코딩을 기록하는 공간

Sass[SCSS] 기초 이론 8 - @if @else 조건문 / @for, @each 반복문

@if, @else 조건문

@for, @each 반복문

'코딩 기록 > Sass [SCSS]' 카테고리의 다른 글

티스토리툴바

Sass[SCSS] 기초 이론 8 - @if @else 조건문 / @for, @each 반복문

@if, @else 조건문

@for, @each 반복문

'코딩 기록 > Sass [SCSS]' 카테고리의 다른 글

관련글

티스토리툴바