SCSS(Sass)란?

• Sass는 Syntactically Awesome StyleSheet의 약자로 기존의 CSS의 단점을 보완하고 코드의 재활용성과 가독성을 올리기 위해 개발된 CSS Preprocessor(전처리기)
• SCSS(Sass)는 전처리기 언어이므로 SCSS 확장자를 가진 파일을 바로 사용할 수는 없고 SCSS파일을 CSS 파일로 컴파일 하는 과정이 필요함.

SCSS와 Sass의 차이

• SCSS는 Sass와 거의 동일하지만 Sass에 비해 좀 더 CSS 코드와 유사한 형태를 가지고 있어 SCSS를 더 많이 사용함

  	구문 스타일	mixin 문법
  SCSS	중괄호와 세미콜론을 사용	선언: @mixin, 적용: @include
  Sass	들여쓰기를 사용하고 세미콜론이 없음	선언: =, 적용: +

주석

• /* */ : CSS의 기본 주석 ⇒ 컴파일 결과로 포함됨
• // : SCSS의 주석 ⇒ 컴파일 결과로 포함되지 않음

중첩(Nesting)

• &: 자신이 포함된 범위에 상위 선택자를 참조하는 키워드
  
• @at-root: 중첩을 벗어나서 선언되게 하는 키워드
  
• 중첩된 속성: 반복되는 키워드가 있다면 범위로 만들어서 키워드를 생략해서 작성할 수 있음
  
• 중첩에서 다중 선택자를 사용하면 여러 선택자의 값들을 한번에 제어가 가능함
  

변수

• SCSS에서 변수를 선언하기 위해선 변수명 앞에 “$”키워드를 붙여야함
  • $variable: {변수 값}
• 재할당이 가능함
• 변수의 유효범위는 변수가 선언된 블럭(중괄호)의 영역임
• !global: 변수의 유효범위를 벗어나서 전역 변수로 사용할 수 있게 하는 키워드
  global 키워드는 동일한 변수명을 가지고 있는 전역 변수를 덮어쓸 수 있으므로 주의해서 사용해야함
  
• !default: 유효범위 안에서 변수를 지정을 할 때 동일한 이름을 가진 변수가 값을 가지고 있다면 재할당한 변수값을 사용하지 않고 원래의 값을 사용함
  
• 보간: “#{변수명}”을 통해 문자열 안에서도 변수를 사용할 수 있음(JS의 탬플릿 리터럴과 비슷함)
  선택자에도 보간을 사용할 수 있음 ⇒ 선택자 부분에 변수를 사용할 때는 보간을 사용해야함
  

데이터 타입

Number

• 정수, 실수 등의 데이터 타입
• 단위가 붙어있는 숫자도 Number 타입으로 취급함 ⇒ ex. 20px, 2fr

String

• 문자로 되어져있는 값들과 따옴표로 묶어진 값들은 모두 String 타입

Color

• blue, rgba(255, 0, 0), #fff 등 CSS로 표현할 수 있는 색상들을 color 타입

Boolean

• true, false 값

Null

• null 값을 가지고 있는 요소는 컴파일되지 않음

List

• 배열 데이터와 유사함
• 값들이 나열되어 있으면 list 데이터
  • $list: (10px, 15px, 20px);
  • $list: 10px, 15px, 20px;
  • $list: 10px 15px 20px;

Map

• key, value 형태로 값을 작성
• $map: ( key: value ); ⇒ 소괄호 생략 불가능
• map 타입 데이터의 값을 조회하기 위해서는 sass의 map 내장 모듈을 사용해야함

  @use "sass:map";
  
  $mapData: (
  	sm: 100px,
  	lg: 200px
  );
  
  .container {
  	width: map.get($mapData, "sm");
  }

산술 연산자

• +, -, *, /, % 연산자를 사용할 수 있음
• “100% - 50px” 등 단위가 다른 경우 산술연산자를 사용할 수 없음 ⇒ calc함수를 사용해서 해결
• “/”(나누기)연산자는 기존의 CSS 문법과 겹치는 부분이 있기 때문에 별도의 사용하는 방법을 지켜야함 나누기 연산자가 적용되지 않음
  • 적용 방법 1: 괄호로 닫기
    • top: (20px / 2); ⇒ top: 10px;
  • 적용 방법 2: 변수에 저장해서 나누기
    • top: $변수 / 2
  • 다른 산술 연산자와 혼합해서 사용
    • top: 20px / 2 + 1px; ⇒ top: 11px;

재활용(@mixin)

• @mixin을 사용해서 재활용할 스타일들을 정의하고 @include를 통해서 정의한 스타일들을 사용할 수 있음
  Sass는 @mixin을 “=”, @include를 “+” 기호로 바꿔서 사용함
  
• js 함수처럼 인자를 넘겨주고 기본 매개변수를 지정해주는 등의 동작이 가능
  
• @content를 통해 mixin에 스타일을 추가할 수 있음
  

삼항 연산자

• if (조건, 참일 경우 반환 값, 거짓일 경우 반환값)

확장(@extend)

• @extend를 중첩해서 사용하는 경우 선택자 폭발이라는 부작용이 생기므로 가급적 @mixin을 사용하는 것을 추천

%(placeholder 선택자)

• extend를 통해서 확장하는 용도로만 사용되는 선택자

함수

• JS의 함수와 비슷한 방법으로 사용 가능
• @ 키워드를 사용해서 문법을 작성
• CSS의 내장 함수와 함수명이 겹치는 문제가 발생할 수 있으므로 두 개 이상의 단어를 사용해서 함수명을 작성하는 것이 좋음
  

반복

for 문

@for $i from 1 through 3 {
	// 1~3까지 반복 (1 <= $i <= 3)
}

@for $i from 1 to 3 {
	// 1~2까지 반복 (1 <= $i < 3)
}

while 문

$n = 8;
// if문과 동일하게 소괄호는 생략 가능
@while ($n > 0) {
	$n: $n - 1;
}

모듈

@import

• @import {파일 경로} 를 통해 다른 모듈을 import할 수 있음
• scss 파일 이름의 시작이 “_”(under score)로 시작하게 된다면 새로운 CSS 파일을 만들어서 컴파일을 하지 않음
• 확장자 생략이 가능
• SCSS파일에서 url함수를 사용하거나, css인 확장자를 사용한 경우, http를 사용한 url 주소를 사용 경우에는 import 코드가 컴파일이 됨

@use

• 모듈 속 변수들에 namespace를 부여할 수 있음
• 함수나 변수 명의 충돌을 방지할 수 있음
• as키워드를 통해 namespace를 변경할 수 있음
  • @use "./variables" as var;

@forward

• 현재 파일의 바깥쪽으로 사용하는 모듈을 전달 시켜줄 수 있음
• as {namespace}*를 통해 namespace 부여 가능

// /your-style/main.scss
@use "./variables" as var;
@use "./minxins" as mix;
@forward "./variables" as var-*;

div {
	color: var.$primary;
}

// /my-style/main.scss
@use "../your-style/main";

div {
	color: main.$var-primary; // 변수 이름 앞에 namespace를 작성
}

디버그 규칙

• @debug: 콘솔에 메시지가 출력됨

  .box {
    @debug "Hello SCSS!"; // Hello SCSS! 출력
  }

• @warn: 콘솔에 경고 메시지 출력

  .box {
    @debug "Hello SCSS!"; // Hello SCSS! 경고 메시지 출력
  }

• @error: 에러를 발생시켜서 컴파일이 정상적으로 동작하지 않음

  .box {
    @error "Hello SCSS!";
  }
  
  // 컴파일된 css파일에 error 메시지가 포함됨
  /* Error: "Hello SCSS!"
   *   ,
   * 3 |   @error "Hello SCSS!";
   *   |   ^^^^^^^^^^^^^^^^^^^^
   *   '
   *   scss/main.scss 3:3  root stylesheet */