[SASS] 일단 SASS 시작하기 (4)

📌 @if, @else

• 조건에 따라 스타일을 반환한다. - JS조건문(if-else문)과 유사
• mixin과 같이 자주 사용 (인자로 무엇을 받아오느냐에 따라 분기 가능)
• 조건에 ()는 생략 가능하다.
• 조건에는 논리 연산자인 and, or, not을 사용할 수 있다.

예시

• $position 이라는 인자가 있고 그 값에 따라 다른 스타일을 적용한다.
• box01은 $x가 50%일 때, box02은 $y가 50%일 때, box03은 $x와 $y가 각각 50%일 때의 스타일을 적용받는다.

📌 @for

• 스타일을 반복적으로 출력한다. - JS 반복문(for문)과 유사
• through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다.
  1) @for $i from 1 through 5 = 1~5만큼 반복
  2) @for $i from 1 to 5 = 1~4만큼 반복

예시

결과

• .item 중의 첫번째는 가장 밝고, 열번째는 가장 어둡게 처리해야 한다.
• 원래는 하나하나씩 nth-child로 색상 지정을 해주어야 했지만 반복문을 사용하여 스타일을 출력한다면 모든 nth-child에 색상을 입력하지 않아도 된다.

💡 알아두면 쓸모있는 !!!

📍 색상함수
만약 버튼에 hover 하거나 active 했을 때 색을 더 밝거나 어둡게 만들려고 한다.
이때 색상값을 하나하나 직접 계산해서 넣기 귀찮다면 색상함수인 scale()을 사용해 보자!!
(이를 위해 우선 @use 'sass:color'; 로 내장 모듈을 호출 해야한다.)

기존에 SASS를 사용하던 사람들은 lighten() 이나 darken()이 더 익숙하지만,,
원하는 밝기가 아닌 고정된 양만큼의 밝기를 변화시키는데 문제가 있어서 새로운 모듈에서 제외되었다.
(아직까지 사용 가능하지만 scale()을 더 추천!)

📌 @each

• List와 Map 데이터를 반복할 때 사용한다. - JS for in문과 유사

📍 List

• List는 말 그대로 하나의 변수에 여러 개의 값을 담고 있는 형태이다. (배열과 비슷함)
• @each {현재 요소를 가리키는 이름} in {변수 이름}

$list: facebook, youtube, instagram;

📍 Map

• Map 데이터를 반복할 경우 하나의 데이터에 두 개의 변수 (key와 value)가 필요합니다.
• key 뿐만 아니라 value 값도 담고 있기 때문에 더 복잡한 활용도 가능하다.
• @each {현재 요소}, {현재 요소의 값} in {변수}

$_map: (
  'facebook': #d3e6f3,
  'instagram': #e9e9e9,
  'youtube': #ffe0e0
);

📌 @function

• 원하는 기능이 있을 때, 직접 함수를 만들어 사용할 수도 있다.
• @function으로 함수를 선언하고 @return으로 리턴값을 설정한다.

• mixin과 거의 유사하지만 반환되는 내용이 다르다.
• mixin은 지정한 스타일을 반환하는 반면, function은 보통 연산된 특정 값을 @return을 통해 반환한다.

// Mixins
@mixin 믹스인이름($매개변수) {
  스타일;
}

// Functions
@function 함수이름($매개변수) {
  @return 값
}

• 사용 방법에도 차이가 있다.
• mixin은 @include 지시어를 사용하지만 function은 function의 이름으로 바로 사용한다.

// Mixin
@include 믹스인이름(인수);

// Functions
함수이름(인수)

예시

• 위의 예시와 같이 함수는 @include 같은 별도의 지시어 없이도 충분히 사용 가능하기 때문에 내가 지정한 함수와 내장 함수의 이름이 충돌할 수 있다.
• 그래서 내가 지정한 함수를 구분할 수 있는 이름을 붙여주는 것이 좋다.