[5주차] 4. SASS / SCSS의 문법(함수, if 함수, 조건문, 반복문, 내장 함수)

SASS/SCSS 문법

함수(functions)

• @mixin과 굉장히 유사하지만 차이점 존재
• @mixin은 믹스인 이름을 정의하고 믹스인 안에서 처리될 매개변수를 정의하고 그 매개 변수는 스타일 안에서 사용할 수 있다. 믹스인 안에 특정 스타일을 정의해서 사용하는 개념
• @function은 믹스인처럼 함수이름을 먼저 정의하고 매개변수가 특정한 값을 받아서 @function 내부에서 처리하게 됨
• @mixin과 다른 점 : 믹스인은 내부에서 처리되는 것이 어떠한 스타일(속성:값;)이다. 속성:값; 세트로 이루어진 전체적인 스타일을 재활용하기 위해 사용하는 개념이 믹스인이다. @function이 처리하는 것은 결과적으로 특정한 값이다. @function은 스타일이 아닌 특정한 값을 재활용하기 위한 개념이다.
• 항상 특정한 값을 반환할 수 있어야 한다.
• 어떠한 처리내용을 통해 내가 원하는 값을 내어주는 개념이다. (값을 내어줄 때는 @return 이라는 지시어를 사용할 수 있다.
• @mixin은 사용시 @include 지시어가 필요하지만 @function은 특정한 지시어 없이 함수이름(인수)로 사용한다. 인수가 없더라도 괄호를 열고 닫아주는 것이 중요하다.
• @mixin과 동일하게 매개변수가 가지는 기본 값 정의 가능

함수 이름 중복

• @function은 특정한 지시어 없이 함수이름을 그대로 사용하기 때문에 SCSS가 가지고 있는 내장 함수(기본적으로 만들어져 있는 함수)와 이름이 중복 될 수 있다.
• 함수 만들어서 사용할시 함수 이름에 특정한 접두어를 붙여서 내장함수가 없는 이름을 써야 한다.(그래서 내장함수 이름을 아는 게 중요하지만 다 알 순 없으니까 전혀 중복되지 않을 이름을 적는 것이 좋을 수도 있다.

---

조건과 반복(Control Directives / Expressions)

if 함수

• JS의 삼항 연산자(conditional ternary operator)와 비슷 : 세개의 항을 가진 연산자라는 뜻
• 작성법 (조건 맞고 틀릴 시 동작 시킬 내용이 달라진다.)
  조건 ? 조건 맞는 경우 동작시킬 내용 : 조건이 틀렸을 경우 동작시킬 내용
• 작성방법 : if(조건, 조건 true일시 동작시킬 표현식, 조건 false 일시 동작시킬 표현식)
• 이 함수를 통해서 if 지시어( if문)보다 조금 더 간단하게 조건을 만들어 낼 수 있다.

[조건문]

@if(지시어)

• if 조건문과 유사
• @else를 통해서 추가적으로 조건을 구분 할 수 있다.
• if 문 작성법( if, if-else if-else, if-else)
• 조건에 ( ) 생략 가능
• else if 한 개 이상 사용 가능
• 특정한 선택자 내부에서 if 조건문을 사용해서 분기처리(이거 할거니 이거할거니) 할 수 있다

1. if 단독

@if(조건) {조건이 참일 때 구문}

2. if-else

@if(조건) {
조건이 참일 때 구문
}@else{ 조건이 거짓일 때 구문 }

3. if-else if-else

@if(조건1) {
조건1이 참일 때 구문
}@else if(조건2){
조건2가 참일 때 구문
}@else{
모두 거짓일 때 구문
}

---

[반복문]

@for

• js의 for문과 굉장히 유사
• 뭔가를 반복적으로 수행할 때 유용하게 사용 가능
• through, to, from 세개의 키워드 사용 가능, 키워드에 따라 결과 달라짐
• from through, from to : ~로부터 시작해서 ~까지 끝내겠다.
• 변수는 관례적으로 $i, $index 사용 (관례적으로 숫자가 증가하거나 감소할 때 사용)
• 안의 내용에서 선택자 부분에 문자보관 해줘야 함
• for 문을 사용해서 원하는 범위의 내용을 반복할 수 있다.
• 필요에 따라서 through와 to를 적재적소에 쓰는 것이 좋다(뭐가 좋고 나쁘고는 없다)

1. from-through

• 반복 범위는 through 앞부분 번호 부터 through 뒷부분 번호까지 반복
• 작성법

@for $변수 from 시작 through 끝 { 반복내용 }

2. from-to

• 반복 범위: to 앞부분 번호부터 뒷부분 번호 바로 직전까지 반복
• 작성법

@for $변수 from 시작 to 끝 { 반복내용 }

---

@each

• List(js의 배열과 유사)와 Map(js의 객체와 유사)데이터를 반복할 때 사용
• js의 for in문과 굉장히 유사하게 정의 됨
• @each를 선언하고 List와 Map 데이터들이 반복할 때마다 해당하는 특정한 데이터가 되는 변수 지정 후 in 키워드 뒤에 list와 map 데이터 정의 그리고나서 반복되는 내용을 { } 안에 입력
• 작성법

@each $변수 in 데이터{ 반복할 내용 }

1. List 반복

• list 데이터 정의시 ( ) 열고 닫을 수 있고 생략도 가능
• 반복할 때마다 list 내 데이터가 순서대로 변수에 지정된다.
• 내장함수 index(list데이터, list 내 몇번째에 속하는지 알고싶은 데이터)를 통해 List 내 데이터들의 인덱스를 지정할 수 있다. (nth-child와 함께 사용시 현재 반복되는 구간이 몇번째 반복하고 있는지 확인 가능)
• list 데이터를 통해서 가지고 있는 값은 컴파일 결과엔 직접적으로 나오진 않지만 가지고 있는 개수를 통해서 특정한 컴파일 결과를 낼 수 있다.
• 경로에도 문자보관을 사용해서 변수를 불러와 list 내 데이터를 경로에 지정할 수 있다.
• 매개 변수가 list 데이터를 받아주고 in 키워드 작성 후 list 데이터 작성후 반복 시작

2. Map 반복

• Map 데이터 정의시 ( ) 무조건 필수
• list 데이터와 달리 key를 받을 매개변수와 value를 받을 매개변수가 필요하다.
• 매개변수 부분에 key로 들어갈 변수, value를 들어갈 변수 순으로 작성(,로 구분)
• 내장함수 index는 map 데이터를 처리할 수 없다. 그래서 map 데이터를 list화해서 사용
• map 데이터를 가지고 숫자를 추출하기 위해서(map 데이터를 이용해 index 값 추출)는 map 데이터를 list 데이터로 변환해야하므로 내장함수 map-keys(map 데이터의 key 부분만 추출해 list화)나 map-values(map 데이터의 value 부분만 추출해 list화)로 list로 변환한 다음에 내장함수 index 활용

@while

• 조건을 제시하고 그 조건이 거짓(false)이다라고 판별될 때까지 계속 반복
• 조건이 거짓이기 전까지는 내용이 계속 반복되기 때문에 조건을 멈출 수 있는 상황을 만들지 못한다면 무한 루프에 빠져 결과적으로 브라우저를 완벽하게 꺼야하는 문제점이 있어 주의해야 한다.
• 조건만 잘 맞추면 단순하게 반복문을 생성할 수 있어 유용하지만 컴파일 중 무한 루프를 빠질 수 있는 것이 주의사항이다.
• 조건이 명확하고 분명하게 충분히 false로 평가될 수 있는 조건이고 그러한 구문을 갖추고 있다면 while 문을 쓰는 것이 문제가 되진 않지만 조건이 false로 평가 될 수 없겠다라는 생각이 들면 while 문을 쓰지 않고 for 문이나 each 문을 쓰는 것을 추천한다.
• 작성법

@while 조건 { 반복 내용 }

---

내장함수(Buit-in Functions)

• Sass에서는 이미 만들어져 있는 함수가 존재한다. 생각보다 종류가 많다.
• Sass 내장함수 종류 확인 : https://sass-lang.com/documentation/modules
• 내장함수 목록 볼 때 [ ]로 묶여져 있는 것은 기본값이 있어 선택적으로 넣어도 되고 넣지 않아도 되는 선택 가능한 인수이다. [ ]가 없을 시 다 필수적으로 넣어줘야 하는 인수이다.
• zero-base numbering(0부터 숫자를 셈) 사용하지 않음
• 내장함수들이 어떤 기능들이 있는지만 기억을 하면 내장함수의 이름과 인수의 개념과 기본값이 정해져 있는지 일일이 기억을 안해도 된다.
• 내장함수들이 어떠한 역할들을 가지고 있느냐를 파악하는 데 집중해야 한다.

1. 색상(RGB / HSL / Opacity) 함수

• mix($color1, $color2); : 두개의 색을 섞는 함수
• rgba($color, $alpha): CSS의 순수 함수 rgba( )에는 red값, green값, blue값, alpha값 총 네개의 인수가 들어가야 하지만 Sass의 내장 함수 rgba( )는 color값(red 등), alpha값 총 두개의 인수만 적는다.
• opacify($color, $amount) / fade-in($color, $amount) : 동일한 기능을 갖는 함수, 색상들 더 불투명하게 만듦
• transparentize(($color, $amount) / fade-out($color, $amount) : 동일한 기능을 갖는 함수, 색상들 더 투명하게 만듦

2. 문자(String) 함수

• unquote($string) : 특정한 문자에서 앞뒤로 붙은 따옴표만 싹 제거해주는 함수
• quote($string) : 특정한 문자에서 앞뒤로 따옴표 추가해주는 함수
• str-insert($string, $insert, $index) : 문자의 몇번째에 특정 문자 삽입, 삽입하려고 하는 대상에 대한 문자, 삽입할 문자, 삽입할 위치
• str-index($string, $substring) : 문자에서 특정 문자의 몇 번째에 해당하는지 반환
• str-slice($string, $start-at, [$end-at]) : 문자에서 특정 문자 추출
• to-upper-case($string) : 소문자를 대문자로 변환
• to-lower-case($string) : 대문자를 소문자로 변환
• str-slice($string, $start-at, [$end-at]); : $end-at(기본값이 -1)은 선택 가능한 인수, -1은 끝까지라는 의미이다, 문자에서 특정 문자(몇번째 글자부터 몇 번째 글자까지)를 추출

---

Tips

• 키워드 인수 쓰려면 매개변수들이 기본값 갖고 있어야 함
• null은 그 값을 사용하지 않는다라는 뜻
• unitless : 단위가 붙어있는지 여부 확인해주는 함수( true/false 값 반환)
• 선택자 부분에 직접적으로 변수를 쓸수 없기 때문에 문자보관을 쓴다.
• #{문자}px : 문자px로 출력(문자 보관(#{문자})을 통해서 ~px이다 정의)
• relative, static 등의 값을 가지는 요소는 position 가운데라는 개념을 정의할 수 없다.

---

참고

https://heropy.blog/2018/01/31/sass/