일과 설명

<aside> 📎 scss에 대해서 배워봅시다

</aside>

이전에 css변수를 생성하며 더 효율적인 방법이 없을까 고민하던 중 scss를 만나게 되었습니다.

• Sass(SCSS)가 나오게 된 배경

  제가 CSS변수를 작성하며 느꼈던 불편함들이 Sass가 나오게 된 배경입니다. 간략하게 메모에 기록된 블로그의 내용을 인용하자면

  • 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.
  • function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다.
  • 결국 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 된다.

  이런 이유들로 인해 Sass가 등장하게 되었습니다.

• Sass(SCSS)란 ?

  Syntactically Awesome StyleSheet의 약자로 코드의 재활용성을 올리고, 가독성을 올려주는 CSS의 단점을 보완하고 효율을 높인 CSS 전처리기 언어입니다.

  

  여기서 주의할 점은 Sass 자체로 CSS파일이 아니라 별도의 파일로 존재하며 컴파일을 해주면 CSS파일을 만들어주는 전처리기 언어라는 점입니다. 저희가 사용하는 것은 Sass를 통해 만들어진 css파일을 사용합니다.

• Sass vs SCSS

  제가 앞선 설명에서는 이 둘을 혼용해서 사용했습니다. 원래는 그러면 안되지만 지금 이유를 설명드리겠습니다. 이 둘을 문법 생김새는 다르지만 사실 같은 파생 언어라고 봐도 무방합니다. Sass의 3버전에서 등장한 언어라고 합니다.

  SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식

  저는 이 둘을 비교해보며 SCSS를 최종 선택했습니다.

  • CSS코드와 형태가 유사해 사용하기 편리했다.
  • 중괄호와 세미콜론을 사용한다는 점이 저에게는 좀 더 익숙한 방식이였습니다.
  • 좋은 호환성(CSS가 지원하는 모든 문법과 기능을 사용가능)

  이러한 이유로 SCSS를 사용해서 CSS변수를 생성했습니다.

  $type-bold : 700;
  $type-medium : 500;
  
  $size-large : 24px;
  $size-medium : 16px;
  $size-regular : 14px;
  $size-small : 12px;
      
  @mixin font-variable($weight,$size,$height:auto){
      font-weight: $weight;
      font-size: $size;
      line-height: $height;
  }
  
  /*타이틀, 서브타이틀, 등 굵은 문자 정보를 배치할 때 사용*/
  .display-bold24{
      @include font-variable($type-bold,$size-large)
  }
  .selected-bold16, .display-bold16{
      @include font-variable($type-bold,$size-medium)
  }
  .selected-bold14, .display-bold14{
      @include font-variable($type-bold,$size-regular)
  }
  .display-bold12{
      @include font-variable($type-bold,$size-small)
  }
  /*본문, 주석, 보조 정보 등 문자 정보를 배치할 때 사용*/
  .available-medium16, .display-medium16{
      @include font-variable($type-medium,$size-medium,22px)
  }
  .available-medium14, .display-medium14{
      @include font-variable($type-medium,$size-regular)
  }
  .display-medium12{
      @include font-variable($type-medium,$size-small)
  }
  

  이렇게 최종 SCSS파일을 작성했습니다. 이전의 CSS파일보다 깔끔하고 수정이 편리한 코드가 된 것 같아 마음이 편한해졌습니다.

  SCSS의 변경을 자동으로 감지해서 CSS파일을 생성해 주는 Live Sass Compiler라는 익스텐션을 사용하면서 학습하게 된 vscode의 setting.json을 여는 방법을 따로 정리했습니다. 추가적으로 Live Sass Compiler의 필수?적인 설정 방법도 설명드리겠습니다. ✏💻 vscode setting.json

  그리고 SCSS를 설치하고 익스텐션을 설치하며 많은 시간을 허비한 실수가 있었습니다. 그래서 잊어먹지 않기 위해 따로 실수 일지에 작성할 예정입니다. ✏💻 extension 남용

메모

https://inpa.tistory.com/entry/SCSS-💎-SassSCSS-란-설치-및-컴파일