SCSS

SCSS는 CSS의 전처리 도구 중 하나이며, CSS Preprocessor라는 CSS가 실행되기 전에 실행을 하는 의미를 갖고 있습니다. Sass(SCSS) 외에도 Less, Stylus 등이 있습니다.

SCSS와 같은 CSS 전처리 도구를 사용하면서 가장 유용하게 사용하는 기능은 바로 중첩(Nesting)입니다. 이는 CSS를 통해 반복해서 사용했던 상위 선택자들을 중첩 기능을 통해 매우 간단하게 표현할 수 있습니다.

&(ampersand) 기호를 통하여 상위 선택자를 참조할 수 있습니다. 결국 &는 &가 있는 범위에 해당하는 선택자라고 보시면 됩니다. 아래 예시를 보시면 더욱 쉽게 이해할 수 있습니다.

:(colon) 기호로 시작하여 중첩된 속성을 나타낼 수 있습니다. 주의할 사항은 반드시 중괄호가 끝나는 부분에는 ;(semi-colon)을 표시해주어야 합니다.

SCSS에서 $를 이용하여 JavaScript에서 사용하는 const, let 등과 마찬가지로 변수를 선언할 수 있습니다.

SCSS에서도 산술 연산자를 사용 가능합니다. 다만, 더하기, 뺄셈, 곱셈, 나머지 연산자는 모두 동일한 반면 나누기 연산자는 다른 방법으로 사용하여야 합니다.

SCSS에서는 @mixin를 활용하여 특정한 이름에 내용을 저장하고 @include 키워드로 해당 내용을 재활용할 수 있습니다.

JavaScript에서 for, while을 이용하여 반복문을 이용하는 것처럼 SCSS에서도 반복문을 출력할 수 있습니다. 특히, nth-child(1)와 같이 가상 클래스 선택자를 활용함에 있어 유용하게 사용할 수 있습니다.

SCSS에서 @mixin을 이용하여 함수와 유사하게 사용하는 방법도 있지만 실제로 @function을 SCSS 내에서 JavaScript 함수와 동일한 구조로 활용할 수 있습니다.

색상 내장 함수는 SCSS 내부에서 구현되어 있는 함수로서 색상과 관련하여 활용할 수 있는 함수입니다. mix, rgba, saturate 등에 대해 살펴봅시다.

SCSS 에서도 @import라는 키워드를 통해 SCSS 파일을 다른 SCSS 파일과 연결할 수 있습니다.

SCSS에도 JavaScript와 마찬가지로 데이터 종류가 있습니다. 구성과 명칭은 다소 다르지만, 아래의 예시를 보며 SCSS 내의 데이터 종류에 대해 간단히 알아봅시다.

@content는 @mixin 내의 추가적으로 필요한 내용에 대해 담는 그릇으로 사용할 수 있습니다. 해당 개념에 대해 알아봅시다.