"SCSS"

Syntactically Awesome Style Sheets(SASS) 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.

즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다.

또한, CSS pre-processor로서 다양한 기능을 통해 코드의 재활용성과 가독성을 높여주어 유지보수를 쉽게 해준다는 장점이 있습니다.

---

설치

npm install node-sass --save

설치 시 node-modules 폴더에 node-sass 폴더가 생성 (package source code)

---

변수(Variables)

변수를 스타일시트 전체에서 재사용할 때 주로 사용된다.
색상, 글꼴 아니면 다른 css 값과 같은 항목을 저장할 수 있다.

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

이렇게, 변수로 저장된 css 속성을 사용한다.

중첩(Nesting)

(기본개념)
HTML과 비슷하게 시각적인 계층구조에 따라 중첩시킬 수 있다.

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

이렇게, 'nav' 에 상속되는 많은 태그들을 효율적으로 사용할 수 있다.

Ampersand(&, 상위 선택자 참조)

(응용 1) 중첩자 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다.

.btn {
position:absoulte;
	&:active {
    color: red;
   }
 }
 
 .list {
 	li {
    	&:last-child {
       		margin-right: 0;
           }
          }
         }

다음과 같이 응용할 수 도 있다.

.fs {
	&-small ( font-size: 12pxl )
    &-medium ( font-size: 14pxl )
    &-large ( font-size: 16px )
   }

@at-root (중첩 벗어나기)

(응용 2)
중첩에서 벗어나고 싶을 때, @at-root 키워드를 사용
중첩 안에서 생성하되 중첩 밖에서 사용해야하는 경우에 유용

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

모듈(Modules)

단일 파일에 모든 Sass 작성 없이 @use 규칙에 따라 원하는 대로 분할 할 수 있다. 이 규칙은 다른 Sass파일을 모듈로 로드한다. 즉, 파일 이름을 기반으로 하는 네임스페이스를 사용하여 Sass파일의 변수, mixins 및 함수를 참조할 수 있다.

// _base.sass
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
  
 // style.sass
 @use 'base'
 
 ...

믹스인(Mixins)

믹스인은 스타일 시트 전체에서 재사용 할 css 선언 그룹을 정의하는 기능
두 가지만 기억할 것.

선언하기(@mixin) 그리고, 포함하기 (@include)

"선언하기"

@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

"사용하기"

h1 {
  @include large-text;
}
div {
  @include large-text;
}

확장(Extend)

특정 선택자가 다른 선택자의 모든 스타일을 다 가져와야 하는 경우

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

결과적으로 사실 @extend는 다음과 같은 문제를 고려해야 한다.

내 현재 선택자(위 예제의 .btn-danger)가 어디에 첨부될 것인가?
원치 않는 부작용이 초래될 수도 있는가?
이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가?
결과적으로 확장(Extend) 기능은 무해하거나 혹은 유익할 수도 있지만 그만큼 부작용을 가지고 있을 수 있으니 확장은 사용을 권장하지 않으며, 위에서 살펴본 Mixin을 대체 기능으로 사용할 것.

[출처]
https://heropy.blog/2018/01/31/sass/
https://sass-lang.com/guide
https://react.vlpt.us/