[scss/sass] scss 사용법 익히기 (@if and @else, @each, @for, @while)

sass 공식문서 훑어보기

 

At-Rules - Flow Control

https://sass-lang.com/documentation/at-rules

Sass: At-Rules

 

@if and @else

우리가 생각하는 그 if와 else 맞다.

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  display: inline-block;
  width: 200px;
  height: 300px;

  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.light {
  @include theme-colors($light-theme: true);
}

.dark {
  @include theme-colors($light-theme: false);
}

css 컴파일 된 모습

.light {

  display: inline-block;

  width: 200px;

  height: 300px;

  background-color: #f2ece4;

  color: #036;

}

.dark {

  display: inline-block;

  width: 200px;

  height: 300px;

  background-color: #6b717f;

  color: #d2e1dd;

}

 

 

@each

동일한 내용을 각각 적용 해줌

$icons:
  "eye" "\f06e" 22px,
  "star" "\f005" 26px,
  "stop" "\f256" 20px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content: $glyph;
    font-size: $size;
  }
}

.icon-파라미터:before   엘리먼트에 각각 스타일을적용 해준다. content 안에 font awesome으로 각각 다른 임티를 넣어 주라는 내용임

 

css로 컴파일 된 모습

.icon-eye:before {

  display: inline-block;

  font-family: "Font Awesome 6 Free";

  font-weight: 600;

  content: "\f06e";

  font-size: 22px;

}

.icon-star:before {

  display: inline-block;

  font-family: "Font Awesome 6 Free";

  font-weight: 600;

  content: "\f005";

  font-size: 26px;

}

.icon-stop:before {

  display: inline-block;

  font-family: "Font Awesome 6 Free";

  font-weight: 600;

  content: "\f256";

  font-size: 20px;

}

 

브라우저에 랜더링 된 모습

하찮은 눈알..

 

@for

$base-color: #036;

@for $i from 1 through 3 {
  ul.container {
    li {color: #ffffff; border-bottom: 1px solid #ffffff;}
    li:nth-child(n + #{$i}) {
      background-color: lighten($base-color, $i * 10%);
    }
  }

}

반복문과 동일하다. i가 1부터 3이 될때까지 적용 해주면 됨.

n+i 번째에 해당하는 li의 배경색 밝기를 i + 10% 만큼 높여줘라................

 

css로 컴파일 된 모습

ul.container li {

  color: #ffffff;

  border-bottom: 1px solid #ffffff;

}

ul.container li:nth-child(n+1) {

  background-color: #004d99;

}

ul.container li {

  color: #ffffff;

  border-bottom: 1px solid #ffffff;

}

ul.container li:nth-child(n+2) {

  background-color: #0066cc;

}

ul.container li {

  color: #ffffff;

  border-bottom: 1px solid #ffffff;

}

ul.container li:nth-child(n+3) {

  background-color: #0080ff;

}

 

브라우저에 랜더링 된 모습

 

 

@while

특정 조건에 달성 될 때까지 반복 하는 것.

@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
.sup {
  font-size: scale-below(20px, 16px);
}

$value/$ratio 의 값이 $base 보다 클 때까지(작아지기 전 까지) 반복해서 계산 해라.

css로 컴파일한 모습

.sup {

  font-size: 12.3609394314px;

}

 

공식문서에서는 @each, @for 문으로 대체 가능하니 @while이 필요할 일은 별로 없다고 이야기 함.