Syntactically awesome stylesheet (어썸한 문법 스타일시트)

평소 코드펜이나 다른 프로젝트 코드를 봤을 때 많은 스타일링 파일이 scss로 작성되어있는 것을 많이 봤어서 궁금증을 해결하기 위해 정리합니다.

CSS Preprocessor (css 전처리기기)란?

CSS 문서 작성을 하다 보면 많은 코드가 중복이 되고 양이 많아지게 되고 유지 보수에 영향을 주게 되는데 (Color 값 찾기, 클래스 상속, Tag 닫기 등)
이런 CSS의 문제점들을 일반적인 프로그래밍 개념을 사용하여 (변수, 함수, 상속 등) 해결해 주는 것이 css 전처리기기가 하는 일이다.

대표적으로 Sass, Less, Stylus 가 있으며 가장 사용률이 많은 sass를 선택했습니다.

설치


프로젝트에 sass 설치

yarn add node-sass

sass / scss 두 개의 문법을 제공하는데 scss가 css와 문법을 비슷하게 만들어서 sass보다 사용하기 편하다고 합니다.

Live Sass Compiler 설치

CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하기 때문에 Sass 파일을 Css 파일로 자동 변환을 시켜주는 확장 프로그램인 Live Sass Compiler 를 VSC에서 다운로드합니다.

livesasscompiler.JPG

작성한 sass 파일에서 watch my Sass 클릭! 실시간 자동 컴파일이 시작됩니다.
livesass.JPG

SCSS 기능


모듈화

부모의 중괄호 안에 자식 요소에 대한 스타일을 지정하는 형태로 CSS 선택자를 중첩 할 수 있습니다.
아래 buttonnav의 안에 존재하는 것으로 자동 인식해줍니다.

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  color: white;

  button {
      background: $dark-blue;
  }
}

변수

반복적으로 많이 사용되는 부분을 변수로 지정해 사용합니다.
변수명 앞에 $를 붙여서 만들고, 자주 사용하는 컬러의 경우 변수에 저장해 사용하니 컬러 지정하는데 훨씬 간편하고 코드도 깔끔해졌습니다.

// 생성
$blue: #228be6;
$gray: #495057;
$pink: #fa8bb2;

// 사용
color: $blue;

코드 재사용

많은 선택자에 공통으로 사용되는 코드인 경우 @mixin을 사용하면 함수 형태로 만들어 재활용이 가능해 유지 보수에도 편리하고 훨씬 코드가 깔끔해져서 자주 사용할 것 같습니다. 사용할 때는 @include를 사용합니다.

//생성
@mixin button-color($color) {
    background: $color;
        &:hover {
            background: lighten($color, 10%);
        }
        &:active {
            background: darken($color, 10%);
        }
        &.outline {
            color: $color;
            background: none;
            border: 1px solid $color;
            &:hover {
                background: $color;
                color: white;
            }
        }
}

// 사용
&.blue {
        @include button-color($blue);
    }

import

파일을 부분화 시켜서 다른 scss 파일을 불러와 사용합니다.

@import ‘SCSS파일명’;

정리


작은 프로젝트만 진행해 와서 CSS를 사용하는데 무리가 없었는데,
최근 포트폴리오용으로 만들고 있는 프로젝트들은 규모가 비교적 크다 보니 코드의 양이 많아져 필요한 부분을 찾기 어려워지고 복잡한 부분이 많아 조금 힘든 느낌을 받는 와중에 SCSS를 배우고 전처리기기의 필요성을 알게되서 많은 사람들이 사용하는 이유를 알 것 같고 저 역시 유용하게 사용할 수 있게 됐습니다.

https://github.com/chayeoi/TIL/blob/master/fastcampus/11-react/2018-01-24.md