[Chapter 07] Sass 조건문, 반복문

Conditions @if, @else if, @else 문법 및 활용

@ JS 의 if ~ else 문과 유사한 조건문을 처리할 수 있습니다.(JS 코드에서 조건부분의 괄호를 사용하지 않습니다.)

$value: null;

#condition {
  @if $value == false {
    color: #eee;
  }
}

#demo {
  @if $value == false {
    color: #434343;
  } @else {
    color: #8c8d8a;
  }
}

$custom-red: #e44351;
$custom-green: #3ce1cd;
$custom-blue: #4524dd;
$custom-dark: #161515;

// 배경 컬러 설정 변수
$bg-color: $custom-red;

#demo {
  @if $bg-color == $custom-red {
    color: invert($custom-red); }
  @else if $bg-color == $custom-green {
    color: desaturate(fade-out($custom-green, 20%), 30%); }
  @else if $bg-color == $custom-blue {
    color: lighten($custom-blue, 32%); }
  @else {
    color: white; }
}

// 텍스트, 배경 색상 대조를 조정해주는 사용자 정의 함수
@function text-contrast($bgcolor, $val: 70%) {
  $value: null;
  // 전달인자 유효성 검사
  @if type-of($bgcolor) != color {
    @warn "전달받은 $bgcolor 인자 값이 올바르지 않습니다.";
    @debug "$bgcolor의 값이 #{$bgcolor} 입니다." }

  // 전달받은 배경색 인자의 명도 값이 50%보다 클 경우,
  @if lightness($bgcolor) > 50% {
    $value: darken($bgcolor, $val); }

    // 전달받은 배경색 인자의 명도 값이 50%보다 작을 경우,
  @else {
    $value: lighten($bgcolor, $val); }

  // 결과 값 반환
  @return $value;
}

#demo {
  color: text-contrast(#1f1f1f);

}

Sass 삼항 연산자

// 컬러 변수
$main-bg: #000;

.main {
  // $main-bg 값이 black과 같다면,
  // #fff로 설정
  // 거짓이라면,
  // #000으로 설정
  color: if($main-bg == black, #fff, #000);
}

JS 의 삼항 연산자(3항식 조건문)와 유사하게 조건문으로 처리할 수 있습니다.

Loops @while, @for, @each

@while (Iteration)

$i: 1;
$gutter: 20px;

@while $i <= 12 {
  .grid-#{$i} {
    width: (60px * $i) + $gutter * ($i - 1);
  }
  $i: $i + 1;
}

JS 의 while 문과 유사한 반복문을 사용할 수 있습니다. (JS 코드에서 조건부분에 사용되는 괄호는 sass 에서는 사용되지 않습니다.)

@for (iteration, from ~ [to, through])

반복문 to 키워드

$total: 12;

@for $i from 1 to $total {
  .grid-#{$i} {
    width: 70px * $i;
  }
}

// to vs through
// to: ~까지 (12 전 까지)

반복문 througth 키워드

$total: 12;

@for $i from 1 through $total {
  .grid-#{$i} {
    width: 70px * $i;
  }
}

// to vs through
// through: ~끝까지 (12 끝까지)

JS 반복문과 유사하게 처리 가능하면 to 키워드는 전(미만)까지를 through 키워드는 끝(이하)까지를 의미합니다.

@each (iteration, in ~ [list, map])

// List(배열) 데이터 타입으로 활용가능합니다.
@each $obj in phone, tablet, cup, mouse {

  .item-#{$obj} {
    background-image: url("img/#{$obj}.jpg");
  }
}


// CSS compile 결과
.item-phone {
  background-image: url("img/phone.jpg");
}

.item-tablet {
  background-image: url("img/tablet.jpg");
}

.item-cup {
  background-image: url("img/cup.jpg");
}

.item-mouse {
  background-image: url("img/mouse.jpg");
}

JS 의 for~in문, forEach문과 유사한 반복문을 처리할 수 있습니다.

@each $item in (h1: 2em, h2: 1.5em, h3: 1.2em) {

  #{nth($item, 1)} {
    font-size: nth($item, 2);
  }
}

Map(객체) 데이터 타입을 사용할 때 nth() 함수를 이용하여 보다 고급 활용이 가능해집니다.

@each 문을 이용한 %IR, #{}

이미지 대체기법, 보간법, @each 문을 활용한 아이콘 배치 순환처리

scss

// 이미지 대체기법
// http://nicolasgallagher.com/another-css-image-replacement-technique/
// https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7

%ir {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
}

// SASS 리스트(Lists) 데이터 타입 선언
// 소셜 아이콘 이름을 담은 리스트를 담을 변수 $icons
$icons: (twitter, facebook, youtube, rss);

// SASS @each 문을 사용해 $icons 내부를 순환하여
// 클래스 선언 (문자 보간법 및 플레이스홀더 선택자 활용)
@each $icon in $icons {
.#{$icon} {
    @extend %ir;
        background: url("../images/icons/#{$icons}.png") no-repeat;
    }
}

Jaehee's e-room