조건문

• 조건에 따라 스타일을 주고자 할 때, if와 else문을 사용

@if

• @if에 괄호 없이 true나 false를 반환할 수 있는 조건문 작성
• 조건을 작성할 때 괄호를 사용할 수 있지만 일반적으로 괄호는 생략
• 조건에는 논리연산자 and, or, not을 사용
• if문의 조건이 true일 때만 { } 괄호 안에 있는 코드 실행

결과물

@else

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

@else if

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

반복문

@for

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

// 범위 1이상 5이하
// for문에서 1부터 5까지 반복하라는 의미
// 총 5번 반복되면서 코드가 실행된다.

css일 때, 5번 반복

@each

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

백그라운드에 리스트에 있던 색상들이 하나씩 들어가있다.

@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);
}

function

function

• @function 키워드를 사용하여 함수를 생성
• 함수이름( ) 형태로 함수를 호출하고 실행
• 함수 안에서는 @return 이용해 값을 반환
• Mixin과 비슷하지만 mixin은 스타일 코드를 반환
• 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;
}

내장함수

• Sass에는 기본적으로 내장되어 있는 함수가 있음

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 값을 반환. 인수는 $없이 사용