[CSS] SCSS가 무엇이지? 시작해보기 click (feat. className 자동완성 설정)

scss는 module.css와 굉장히 유사하다는 말만 들어보았지 직접 사용해본적이 없다. 

매번 사용해보고 싶다는 생각이 들었는데 마침 이번 프로젝트에서 CSS의 스타일 정의 방법으로 module CSS + SCSS 방식이 채택되었다!! 프로젝트에 들어가긴 전에 한 번이라도 써보고 들어가고 싶어 한번 test 해본 것을 글로 작성해보겠다! 😁

 

먼저 시작에 들어가기에 앞서 문득 궁금했다. scss란 무엇이고, 왜 module CSS와 SCSS를 둘이 혼합해서 사용하고, module CSS만 쓸 때와 어디가 어떻게 다른건인지? SCSS란 그럼 무엇인지

 

알아보잣 !!!

https://giphy.com/gifs/girl-contacts-xGdvlOVSWaDvi

 

 

 

Sass?

scss를 알아 보면서 먼저 알아야할 점이 Sass이다. Sass는 SCSS의 원조 문법? 이다. 

 

먼저, Sass는 css의 전처리기(preprocessor)이다 

순수 css만 사용하여 스타일을 적용하기에는 프로젝트의 규모가 커질수록 유지보수가 힘들다. 예를 들면 불필요한 선택자를 관리한다던지, 연산기능이 필요한 경우가 생긴다던지,, 이런 추가적인 기능을 위해 생긴 것이 Sass이다. 

 

웹에서는 표준 css만 동작이 가능하기 때문에 이렇게 여러 확장 기능이 추가된 동작할 수가 없다. 하지만 전처리기에 css를 작성하면 웹에서 동작 가능한 css로 컴파일하여 동작이 가능하게 한다. 

 

띠라서 전처리기는 CSS와 크게 문법이 다르지 않고, 조금 더 유지보수가 쉬워질 수 있도록 선택자의 중첩, 조건문, 반복문 등의 기능이 추가된 문법이라고 할 수 있다. 

 

SCSS?

scss는 sass에서 css 구문과 더욱 호환성 있는 기능을 지원하는 상위 문법이다. 

사실 두 문법은 크게 다르지 않지만 SCSS는 {}, ';'이 있지만, Sass는 없다는 점이 제일 큰 차이점이다. 

 

말로만 작성하면 어려우니 예제를 들어보았다.

 

< example >

// SCSS
.buttonColor {
  background-color: white;
  color: black;
}

// Sass
.buttonColor 
  background-color: white
  color: black

 

 

개인적인 생각으로는 SCSS가 조금 더 코드가 눈에 명확하게 보이는 면이 있는 느낌이다. 

Sass는 조금 흐지부지 느낌인 늑낌,,

 

그렇지만 개인적인 취향이라고 하니 조금 더 눈에 보기 편한, 작성하기 편한 방법으로 택하면 좋을 것 같다.

 

 

 

확장 기능

Sass와 SCSS는 CSS의 확장 기능이 동작가능하도록 코드를 작성하면 CSS로 컴파일해주는 전처리기라고 했다.

그렇다면 여러 확장 기능에는 어떤 것이 있을까?

 

1. 변수 할당

$primaty-color: white;

.buttonColor {
  background-color: white;
  color: $primaty-color;
}

 

반복되는 값을 변수로 선언하여 할당이 가능하고, 변수에 변수를 다시 할당하는 재할당도 가능하다.

 

+ 1.1 전역변수 설정 가능 (!global)

원래 변수를 선언하면, 변수는 선언된 블록({}) 안에서만 사용이 가능하다. 하지만 전역에서 사용하고 싶을 경우 !global 플래그를 이용해

변수의 유효범위는 블록 -> 전역으로 설정 가능하다. 

.buttonColor {
  $primaty-color: white !global;
  background-color: white;
  color: $primaty-color;
}

.Container {
  color: $primaty-color //에러 안남!
}

 

 

+ 1.2 변수값 어디든지 할당하기 (문자 보간: interpolation)

#{}을 이용해 코드의 어디든지 변수 값을 넣을 수 있다. 

약간 자바스크릡트로 치자면 벡틱과 ${}과의 조합에서 #{}의 역할을 하는 것과 같다.

`${변수명 넣기이이}`

 

2. 중첩 구문

.Container {
  width: 100vw;
  .Card {
    background-color: pink;
      #title {
        font-size: 2rem;
      }
  }
}

 

중첩 구문을 통해 상위 선택자의 반복을 피할 수 있고, 만약 상위 요소가 제거되거나 수정될 때, 조금 더 하위 요소들을 관리하기 쉬울 것 같다.

 

3. 상위 부모 선택자(&)

.buttonColor {
  background-color: white;
  color: $primaty-color;

  &:hover {
    background-color: red;
  }
}

 

해당 선택자를 쉽게 참조하고 스타일 지정을 할 수 있다.

 

4. 중첩

동일한 네임 스페이스를 가진 속성들은 '{}'로 묶어서 작성함으로써 한눈에 보기 쉽게 작성이 가능하다.

.buttonColor {
  background: {
    color: white;
    position: relative;
  };
  font: {
    size: 1.6rem;
    weight: 700;
  }
}

 

++ 4-1. 중첩에서 벗어나기 (@at-root)

해당 중첩 안에서 생성하지만 중첩 밖에서 사용하는 경우

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

 

box에서 w, h 변수를 사용하기 위해 list 범위 내에서 선언되었지만, 해당 리스트 범위 밖에서 사용이 가능하다.

 

5. 연산

위에서 말했듯이 Sass/SCSS에서 제공하는 확장 기능 중에 하나가 연산이다. 

이는 고정된 값이 아니기 때문에 상황에 맞게 유동적으로 값을 계산하여 크기 조절하거나 정해진 값을 나눠서 분배할 경우 유용하다. 

 

.buttonColor {
  $x: 10rem;
  width: $x; 
  height: $x / 2;
}

 

다른 기능보다 이 부분이 정말 CSS의 불편했던 부분을 제대로 간파해서 확장하지 않았나,, 라는 생각이 든다. 정말 항상 순서 CSS로만 값을 주엇을 때는 위에 같이 컴포넌트의 가로,세로가 비례하다고 할 때 반응형으로 만들다보면 높이 지정과 너비 지정을 변하는 지점 마다  일일이 해야하니 저엉말 귀찮았기 때문이다. .. SCSS를 사용하게 되면 정말 잘 사용하게 될 것 같다!! 😊

 

 

그 밖에 mixin, include, 인수 등등이 있지만 너무 많아 나중에 플젝 시작하면서 하나하나 찾아보는 것이 좋을 것 같다. 

이 기능들을 참고한 사이트들은 아래 참고자료에 첨부하였다 !! 추가 기능이 필요하다면 아래 사이트로 보시길,,

 

 

 

 

SCSS 설치

그렇다면 scss를 설치하고, 실행해보자!

 

1. 설치

npm install node-sass

 

2. 필요한 scss 파일 생성

파일명은 .css -> .scss 로 수정하거나 생성한다. 

참고로 moduleCSS + SCSS을 사용하는 경우에는 파일명을 
fileName.mudule.scss로 한다

 

3. 만약 자동완성을 하고 싶다면? 아래와 같이 설정해보세요.

 

1) 설치

npm install -D typescript-plugin-css-modules

 

2) tsconfig.json에 추가

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

 

3) vsCode의 settings.json에 해당 설정 추가

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

 

🖐️ settings.json 들어가기

맥의 경우 (shift + command + p ) , window의 경우 (shift+ ctrl + p) 를 눌러서 setting.json을 검색하면
여러 개가 나오는데 그 중 사용자 설정 버전으로 들어가서 해당 설정을 추가해주시면 됩니다.

 

 

자동완성이 성공적으로 됨을 확인할 수 있다. 

 

 

저번 플젝에서 moduleCSS를 사용할 때 className을 넣어주는 부분에서 항상 자동완성이 있었으면 좋겟다. .. 굉장히 귀찮다,,, 라고 생각했는데 이 기능이 있었다니!! 역시 많이 서치해보는 것은 편한 개발 방법으로 알려주는 경우가 굉장히 많다!