본문으로 바로가기

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

category StyleSheet/SASSㆍSCSS 2015. 9. 8. 15:23


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


'StyleSheet > SASSㆍSCSS' 카테고리의 다른 글

[Chapter 01] Sass  (0) 2015.10.27
Sass 활용(웹폰트,PX2EM, accessivility )  (0) 2015.09.14
[Chapter 05] Sass Mixin 응용  (0) 2015.09.01
Sass 명령어 기초 배우기  (0) 2015.08.07
SCSS/SASS(CSS Preprocessor) & Sass install  (4) 2015.08.06