[CSS] Sass & Scss ( Syntactically Awesome Style Sheets )

⚡️Sass 와 Scss 차이점

// .sass

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

  li
    display: inline-block

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

// .scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

⓵  sass 문법을 활용한 방법 ⓶ scss 문법을 활용한 방법 
sass보다 scss 문법을 사용하는 것을 권장하고 있습니다.

왜냐하면 sass의 문법 개선을 통해 나온 것이 scss이기도 하고,

scss가 더 넓은 범용성과 CSS의 호환성 등의 장점이 있기 때문입니다.  

 

⚡️CSS Preprocessor

웹 페이지를 만들면서 CSS를 이용해 다양한 스타일을 적용하고 관리할 수 있고, 다양한 기능들을 적용할 수 있지만 문법이 불편해서 막상 적용하기 힘든 부분들이 있습니다. 이러한 불편함을 개선하고자 나온 기술이 CSS Preprocessor 즉, CSS 전처리기입니다.

CSS 전처리기가 하는 일

여러 가지 기능들을 문법적으로 편리하게 작성할 수 있도록 제공하는 전처리기의 양식에 맞게 파일을 미리 작성해두면, 그걸 최종적으로 실제 실행 전에 처리를 해줘서 브라우저가 읽을 수 있는 CSS 파일로 변환해 주는 일을 합니다.

 

⚡️ Scss 설치

$ npm install sass

라이브러리 설치 방법은 위와 같습니다. 터미널에서 프로젝트 폴더로 이동한 뒤 위와 같은 명령어를 작성하면 설치가 가능합니다.

// package.json

{
  "name": "westagram-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "sass": "^4.14.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "3.4.3"
  }
}

설치가 완료되었다면, 위처럼 package.json의 dependencies 항목에서 해당 패키지 명과 버전이 추가되었는지 확인해 줍니다.

 

⚡️ Scss의 활용

1. Nesting

컴포넌트 간 CSS가 겹치지 않도록 설정하는 방법으로 className을 전부 다르게 적용하거나, 자손결합자 기능을 활용해 설정할 수 있지만, 여러 문제점과 불편한 점이 있다고 언급했습니다. 이러한 부분을 Sass에서 사용하는 nesting 방식을 통해 해결할 수 있습니다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

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

2.  변수

CSS 스타일을 작성하다 보면 동일한 스타일 속성인데, 

여러 곳에서 사용되거나 오타가 나기 쉬운 속성들을 변수로 만들어 그 변수를 원하는 곳에 넣어서 사용하는 기능이 있습니다.

( rgb로 컬러를 구현하거나, HEX 코드로 컬러를 구현할 때 )

// Sass 변수 활용 예시

$primary-color: #333;

body {
  border: 1px solid black;
  color: $primary-color;
}

.inverse {
  background-color: $primary-color;
  color: white;
}

3.  & 선택자

Nesting 내부에서 & 선택자는 부모 선택자로 치환됩니다. 예를 들어, button 태그에 스타일을 부여하고, 해당 버튼에 hover 효과도 부여하고 싶다면 아래와 같이 구현할 수 있습니다.

// Sass & 선택자 활용 예시

button {
  width: 200px;
  height: 50px;

  &:hover {
    width: 400px;
    height: 100px;
  }
}

/* Compile to CSS */

button {
  width: 200px;
  height: 50px;
}

button:hover {
  width: 400px;
  height: 100px;
}

 

4. mixin

mixin은 앞선 변수 기능과 마찬가지로 중복되는 스타일 속성이 있을 때 사용하는 방법인데, 

중복되는 스타일 속성이 여러 개가 있을 때 한 번에 묶어서 사용하기 좋은 방법입니다.

//variables.scss

@mixin flex($justify: center, $align: center, $direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
}

@mixin font($size: 16px, $height: 1, $spacing: normal, $weight: 500) {
  font-size: $size;
  font-weight: $weight;
  letter-spacing: $spacing;
  line-height: $height;
}
 
$primary-color: #5655a5;
$subPrimary-color: #8887c0;
$background-color: #f0f3fa;
$white-color: #fff;

@import '../../../../styles/variables.scss';

.errorChartPresenter {
  @include flex(space-between, center, column);
  width: 60.6771vw;
  height: 41.4583vw;

  .lineBarChartBox {
    @include flex(center, center, 'null');
    width: 100%;
    height: 19.2708vw;
    background: $white-color;
    border-radius: 0.7813vw;
   }
  }

⚡️ Summary

1. Sass는 CSS 문법을 조금 더 편하게 작성할 수 있다.
2. scss 문법으로 작성한 파일을 실행 전에 처리를 해줘서 브라우저가 읽을 수 있는 CSS 파일로 변환해 주는 CSS 전처리기입니다.
3. 기존 CSS 파일의 확장자를 scss로 변경하면 scss 문법이 사용 가능해 집니다.
4. Sass의 nesting, mixin 등 다양한 기능을 활용해서 문법적으로 조금 더 편하게 스타일을 작성할 수 있습니다.