🔸 Sass

• 폴더 단위로 컴파일을 진행하고 싶을 때 CLI 명령어를 어떻게 바꿔야 하는가?

: package.json 파일의 명령어를 sass 수정할 폴더명:컴파일할 폴더명처럼 수정해야 함

• Sass, Scss 파일 이름 앞에 _를 붙이면 어떤 이점이 있는가?

: 폴더 전체를 컴파일하는 경우 _를 파일 이름 앞에 붙이지 않으면 모든 파일을 컴파일하기 때문에 _를 붙여서 컴파일하지 않을 파일을 지정할 수 있음

• Sass의 주석 사용 방법에는 어떤 것이 있고, 각각의 특징은 무엇인가?

: 기존 CSS처럼 /* */ 방식, 자바스크립트처럼 // 방식으로 사용할 수 있음
: /* */ 방식의 주석은 컴파일 시 CSS 파일에 주석까지 같이 컴파일되지만, // 방식을 사용한 주석은 컴파일되지 않음

• @use와 @forward는 무엇이고, 어떻게 사용하는가?

: 기존의 @import를 대체하여 파일을 컴포넌트화시켜서 서로 연결할 수 있는 지시어
: @forward를 사용하여 파일을 내보낼 수 있고, @use를 사용하여 내보낸 파일을 사용할 수 있음
: @use "파일 경로/파일명", @forward "파일 경로/파일명"과 같은 방식으로 사용

• 다른 파일에 있는 변수를 가져와서 사용할 때 유의점은 무엇인가?

: 가져오려는 파일에 변수가 있는 경우 @use "파일명" as "임의의 이름 값"처럼 어느 파일에서 가져왔는지 알아볼 수 있도록 as 뒤에 이름 값을 따로 설정해야 함
ex) 이름 값을 color로 설정한 경우 변수를 사용할 때 color.$green과 같은 방식으로 사용하게 됨

• @use에 사용하는 *의 의미는 무엇인가?

: as 뒤에 * 키워드를 작성하면 따로 이름값을 설정하지 않고 이름만으로 변수를 사용할 수 있음

• @mixin은 무엇이고, 어떻게 사용하는가?

: 자주 사용하는 코드 조각을 따로 모아서 컴포넌트화할 수 있는 지시어, CSS의 반복 작업을 줄일 수 있음
: @mixin "이름" { }의 방식으로 사용 가능

• @include는 무엇이고, 어떻게 사용하는가?

: @mixin으로 만들어놓은 코드 조각을 @include로 불러와서 사용할 수 있게 해주는 지시어
: @include "설정한 @mixin 이름"처럼 사용 가능
: @mixin의 선언 블록 안에 @include를 중첩하여 사용할 수도 있음

• @mixin에 함수처럼 변수를 지정하는 경우 유의할 점은 무엇인가?

: 여러 개의 변수를 설정하는 경우, 앞에서부터 순서대로 변수 값이 할당되기 때문에 순서를 꼭 중시하면서 작성해야 함

• @mixin에 변수를 지정할 때, 기본 값은 어떻게 설정하는가?

: $변수명: 기본 값과 같은 방식으로 지정해주면, 따로 변수의 값을 입력하지 않아도 해당 변수명은 자동으로 기본 값을 가지게 됨

• @include로 따로 변수의 값을 지정하고 싶은 경우 어떻게 해야 하는가?

: $변수명: 설정하고 싶은 값과 같은 방식으로 설정하고 싶은 변수의 값을 따로 지정할 수 있음

• Sass에서 연산을 사용하는 경우 주의해야 할 점은 무엇인가?

: ( )로 연산할 부분을 묶어야 정상적으로 동작함
: 변수 혹은 값과 연산 부호 사이는 공백으로 구분해야 함
ex) ($width - 10px)

• @content는 무엇이고, 어떻게 사용하는가?

: @mixin 선언 블록 안에 @content를 사용하면 @include로 사용할 때 선언 블록 안에 따로 스타일링을 지정할 수 있음

• @if는 무엇이고, 어떻게 사용하는가?

: 자바스크립트의 조건문과 동일한 역할
: @if "조건" { }처럼 사용하여 조건에 해당될 때만 선언 블록 안의 스타일링이 적용되도록 설정할 수 있음

• @error는 무엇이고, 어떻게 사용하는가?

: @if와 함께 사용하여 조건에 해당하지 않는 경우 컴파일 과정에서 에러 메시지를 전달할 수 있음

• @function은 무엇이고, 어떻게 사용하는가?

: 자바스크립트의 함수와 동일한 역할
: 전달 받은 변수를 선언 블록 내에서 조작하여 @return으로 반환할 수 있음

• @each는 무엇이고, 어떻게 사용하는가?

: 자바스크립트의 반복문과 동일한 역할
: map, list 자료형과 함께 사용하여 반복문을 작성할 수 있음
: map과 함께 사용하는 경우 @each "키 이름", "값 이름" in "map 자료형 이름"처럼 사용 가능
: list와 함께 사용하는 경우 @each "값 이름" in "list 자료형 이름"처럼 사용 가능

• Sass에서 #을 통해 무엇을 할 수 있는가?

: 자바스크립트의 템플릿 리터럴처럼 사용할 수 있음
: #{$변수명}처럼 사용하여 반환할 문자열에 변수명을 할당하는 등의 역할 가능

• Sass에서 &는 무엇을 의미하는가?

: 선택자를 나열하여 선언하지 않아도 &를 사용하여 간편하게 선택자의 중첩 구조를 나타낼 수 있음

• Sass에서 map 자료형을 사용하려면 어떻게 해야 하는가?

: 자바스크립트의 map 자료형과 유사하고, 기본 문법은 $변수명: ("키1": "값1", "키2", "값2" ...)
: 내장 함수를 사용하려면 문서 상단에 @use 지시어로 sass:map을 선언해야 함

• Sass에서 list 자료형을 사용하려면 어떻게 해야 하는가?
  : 자바스크립트의 배열 자료형과 유사하고, 기본 문법은 $변수명: "값1", "값2", "값3" ...;
  : 내장 함수를 사용하려면 문서 상단에 @use 지시어로 sass:list를 선언해야 함
  
  
• map 자료형의 내장 함수인 has-key는 무엇이고, 어떻게 사용하는가?

: map 자료형과 key 이름을 변수로 받아서, 전달받은 변수와 동일한 이름의 key가 자료형 안에 존재하는지 판별할 수 있는 함수
: map.has-key("map 자료형 이름", "key 이름")처럼 사용 가능

• map 자료형의 내장 함수인 get은 무엇이고, 어떻게 사용하는가?

: map 자료형과 key 이름을 변수로 받아서, 자료형 안에 해당하는 key가 가지고 있는 값을 반환하는 함수
map.get("map 자료형 이름", "key 이름")처럼 사용 가능

• !default가 의미하는 바는 무엇인가?

: 변수의 이름이 중복되는 경우 값 할당을 어떻게 할 것인지에 대한 명령어
: !default를 작성하면 변수에 할당된 값이 존재하지 않는 경우에만 새로운 값을 할당함, 만약 할당된 값이 이미 존재하면 새로 값을 할당하지 않음

• Sass에서 div와 같은 계산 관련 함수를 사용하려면 어떻게 해야 하는가?

: @use와 함께 sass:math를 선언해야 계산 관련 내장 함수를 사용할 수 있음
: 사용 방법은 math."함수 이름"(변수)

• Sass의 곱하기 연산은 어떤 특징을 있는가?

: 계산하려는 값이 모두 단위를 가지고 있는 경우 에러가 발생, 최소한 값의 한쪽은 단위가 없어야 함
ex) 16px * 4px - 에러
16px * 4 - 64px

• Sass의 나누기 연산은 어떤 특징이 있는가?

: 곱하기 연산처럼 /만 사용하여 연산 불가능, 표준 CSS 속성 중에 /를 사용하여 속성의 값을 구분하는 경우가 있기 때문
: 나누기 연산을 사용하려면 필히 math의 내장 함수인 div 사용해야 함
: Sass에서 나누기 연산을 수행하는 경우 단위가 사라지고 값만 계산되어 반환된다는 특징이 있음, 이를 이용하여 단위를 삭제하는 함수를 만들 수 있음
ex) 16px / 4px - 16px/4px
math.div(1, 2) - 0.5
math.div(16px, 4) - 4px
math.div(16px/4px) - 4

• Sass의 더하기 연산을 문자열에 어떻게 활용할 수 있는가?

: #과 +를 적절히 활용하면 문자열에 변수를 대입하여 자동으로 반환해줄 수 있음
ex) url("./" + "변수명");