SASS - 6장 조건문과 반복문, 함수

수정·2023년 3월 5일
Sass
0

Sass

목록 보기
6/7
post-thumbnail

조건문과 반복문, 함수

1. 조건문

조건에 따라 스타일을 주고자 할 때, if와 else문을 사용하는데요. if문 하나만 사용하는 경우도 있으며, 뒤에 나오는 else문, else if문과도 함께 사용하는 경우도 있습니다.

1-1. @if

@if에 괄호 없이 true나 false를 반환할 수 있는 조건문을 작성하시면 됩니다. (조건을 작성할 때 괄호를 사용할 수 있지만 일반적으로 괄호는 생략합니다) 조건에는 논리연산자 and, or, not을 사용하고, if문의 조건이 true일 때만 { } 괄호 안에 있는 코드가 실행됩니다.

@if (조건) {
	// 조건이 참일 때 실행될 구문
}
// if문 예시 작성
// Sass 공식문서
// circle이 false면 사각형을, true이면 원형으로 스타일함
@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}
/*CSS*/
.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

1-2. @else

@else문은 if 문처럼 조건문이 필요하지는 않으며 if문에서 걸었던 조건이 false가 나오면 else문의 코드가 실행됩니다 

@if (조건) {
	// 조건이 참일 때 실행될 구문
} @else{
	// if문의 조건이 거짓일 때 실행될 구문
}
// Scss - else문
// Sass 공식문서
// ture이면 밝은 색을, false면 어두운 색을 스타일함
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

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

1-3. @else if

@else if문은 if문으로 부족할 때, 즉 여러 개의 조건문을 사용해야 할 때 사용합니다. @else if문에도 true나 false를 반환하는 조건문을 작성합니다. if문의 조건에서 false가 나왔을 때, else if문으로 넘어가서 조건에 대해 true인지 false인지 판단합니다. true인 경우 else if문 내의 코드를 실행하고, false 라면 그 다음 조건문( else or else if )로 넘어가게 됩니다.

if (조건){
	// 조건이 참일 때 실행될 구문
} @else if(조건){
	// else if 조건이 참일 때 실행될 구문
} @else{
	// 위에 모든 조건이 거짓일 때 실행될 구문
}
// Scss - if, else if, else문
// Sass 공식문서
// 조건에 해당하는 방향에 맞춰서 border-bottom 컬러를 스타일함
@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: ($size/2);

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}
/*CSS*/
.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

반응형 코딩 예제

$media-width-lg: 1000px;
$media-width-md: 800px;
$media-width-sm: 500px;

$media-font-lg: 16px;
$media-font-md: 14px;
$media-font-sm: 12px;

@mixin responsive($size) {
    background-color: green;
    width: 200px;
    height: 200px;
    font-size: $media-font-lg;
    @if $size == lg {
        @media screen and (max-width: $media-width-lg) {
            width: 100px;
            height: 100px;
            font-size: $media-font-md;
            @content;      
        }
    }
    @else if $size == md {
        @media screen and (max-width: $media-width-md) {
            width: 100px;
            height: 100px;
            font-size: $media-font-md;
            @content;      
        }
    }
    @else if $size == sm {
        @media screen and (max-width: $media-width-sm) {
            width: 100px;
            height: 100px;
            font-size: $media-font-sm;       
            @content;      
        }
    }
    
}

.main {
    @include responsive(lg){
        color: red;
    }
}

2. 반복문

2-1. @for

for ($변수) from (시작) through(끝){
	// 반복할 내용
}

@for은 정의한 횟수만큼 코드 실행을 반복합니다. @for문에 from(시작 : 이상) - through(끝 : 이하)를 사용하여 어디서 시작해서 어디서 끝날 지를 알려줍니다. nth- 선택자를 사용하는 경우 유용하게 사용할 수 있습니다.

// Scss - for문
// for문을 이용해 nth-선택자에게 각각의 image를 배경에 넣어준다.
@for $i from 1 through 5 {
  .photo-box:nth-child(#{$i}) {
    background-image: url("../assets/phoster#{$i}.png");
  }
} 
// 범위 1이상 5이하
// for문에서 1부터 5까지 반복하라는 의미입니다. 총 5번 반복되면서 코드가 실행된다.
// 만약 from 3 throught 8 이라면 3에서 8까지 6번 실행된다.
/*CSS*/
.photo-box:nth-child(1) {
  background-image: url("../assets/phoster1.png");
}

.photo-box:nth-child(2) {
  background-image: url("../assets/phoster2.png");
}

.photo-box:nth-child(3) {
  background-image: url("../assets/phoster3.png");
}

.photo-box:nth-child(4) {
  background-image: url("../assets/phoster4.png");
}

.photo-box:nth-child(5) {
  background-image: url("../assets/phoster5.png");
}

2-2. @each

each문은 lists나 맵의 각각의 요소마다 코드를 실행해서 스타일을 적용할 수 있게 합니다. 

@each ($변수) in (리스트나 맵){ 
	// 반복할 내용
}
// Sass - each문
// color-palette 리스트에 들어있는 색상을 each문을 사용하여 background에 색상값을 넣어준다.
$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;

@each $color in $color-palette {
  $i: index($color-palette, $color); //index는 list의 내장함수
  .color-circle:nth-child(#{$i}) {
    background: $color;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}

/*CSS*/
.color-circle:nth-child(1) {
  background: #dad5d2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(2) {
  background: #3a3532;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(3) {
  background: #375945;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(4) {
  background: #5b8767;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(5) {
  background: #a6c198;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-circle:nth-child(6) {
  background: #dbdfc8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

2-3. @while

@while 조건 {
	// 반복할 내용
}

특정 조건에 충족될 때까지 코드를 무한 반복하며, 조건을 만날 때 while문을 빠져나오게 됩니다. 참고로, while문은 빠져나오는 조건을 만드는 경우가 거의 없어서 잘 사용하지 않습니다.

// Scss - while문
// Sass 공식문서
// value값이 base보다 작을 때까지 일정한 값으로 계속 나눠준다.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: ($value/$ratio);
  }
  @return $value;
}

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

쉬운 예제

$hojun: 10;
@while $hojun > 1 {
    $hojun: $hojun - 2;
    .content-#{$hojun} {
        width: 100px;
        height: 100px;
        background: red;
    }
}

3. function

3-1. function

@function 키워드를 사용하여 함수를 생성하고 함수이름( ) 형태로 함수를 호출하고 실행합니다. 함수 안에서는 @return 이용해 값을 반환합니다. 함수는 Mixin과 비슷하지만 mixin은 스타일 코드를 반환하고 function은 @return 키워드를 사용해서 값 자체를 반환한다는 차이가 있습니다. 

@function 함수이름($매개변수) {
	// 실행 코드
	@return 값
}
// Scss - function
// Sass 공식문서
// 거듭제곱을 구하는 함수
@function pow($base, $exponent) { 
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

※ Scss 파일 코드를 작성하여 실행한 후, css와 비교해 보세요!

/*CSS*/
.sidebar {
  float: left;
  margin-left: 64px;
}

3-2. 내장함수

Sass에는 기본적으로 내장되어 있는 함수가 있습니다. 앞에서 lists와 maps를 설명하면서 관련 내장함수를 잠깐 확인했는데요. 그 외에 내장함수 중 몇 개만 더 살펴보겠습니다.

1) 색상 함수

  • lighten(color, amount) : 기존 색상의 밝기를 높입니다.( 0%-100% 사이의 값 )
  • darken(color, amount) : 기존 색상의 밝기를 낮춥니다.( 0%-100% 사이의 값 )
  • mix(color1, color2, weight) : 2개의 색상을 섞어서 새로운 색상을 만듭니다.

2) 숫자 함수

  • max(number, ..) : 괄호에 넣은 값 중에 가장 큰 수를 반환합니다.
  • min(number, ..) : 괄호에 넣은 값 중에 가장 작은 수를 반환합니다.
  • parcentage(number) : 퍼센트로 숫자를 바꿔줍니다.
  • comparable(num1,num2) : 숫자1과 숫자2가 비교 가능한지 확인 후 true,false 값을 반환합니다.

3) 문자 함수

  • srt-insert(string,insert,index) : 문자열에 원하는 위치(index)에 문자를 넣은 후(insert), 새로운 문자열을 반환합니다.
  • str-index(string,substring) : 문자열에서 해당 문자의 index 값을 반환합니다.
  • to-upper-case(string) : 문자열 전부를 대문자로 바꿔줍니다.
  • to-lower-case(string) : 문자열 전부를 소문자로 바꿔줍니다.

4) 확인 함수

  • unit(number) : 숫자의 단위를 반환해 줍니다.
  • unitless(number) : 단위를 가지고 있는지 판단하여 true,false 값을 반환합니다.
  • variable-exists(name) : 변수가 현재 범위에 존재하는지 판단하여 true,false 값을 반환합니다. 이 함수의 인수는 $없이 사용합니다.

출처 : 인프런 - [초급] 40분만에 훑어보는 Sass

profile
수정
공부 기록
이전 포스트

SASS - 5장 상속(Extend)

다음 포스트

SASS - 7장 Toast UI의 Sass 컨벤션

0개의 댓글