Sass 한 번만 써본 사람은 없을걸🤩

📍 CSS Preprocessor

웹 페이지를 만들면서 CSS를 이용해 다양한 스타일을 적용하고 관리할 수 있고, 다양한 기능들을 적용할 수 있다. 하지만 문법이 불편해서 막상 적용하기 힘든 부분들이 있는데, 이러한 불편함을 개선하고자 CSS Preprocessor(CSS 전처리기)가 등장했다.

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

CSS 전처리기 종류는 아래와 같다.

• Sass/SCSS
• less
• Stylus
• PostCSS

📍 Sass

그 중 내가 배운 모듈은 Sass😀
Sass의 뜻은 Syntactically Awesome Style Sheets, 즉 문법적으로 엄청난 스타일 시트라는 뜻이다. 그 정도로 기존 CSS 파일에서 겪었던 불편한 부분들이 Sass를 사용하며 해결할 수 있다 👍

📍 Sass 사용방법

Sass를 사용하기 위해 프로젝트 폴더에서 아래와 같이 명령어를 입력한다.
설치 후 package.json 파일에서 Sass가 잘 설치되었는지 확인한다.

$ npm install sass

그 이후, 기존 css파일의 확장자명을 scss로 변경하고, 기존에 css파일을 import한 js파일이 있다면 확장자명을 scss로 변경한다.

📍 Sass의 장점

❶ 변수 사용 : 중복되는 값이 있을 경우 변수로 지정해놓고 아래처럼 사용할 수 있다.

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

컴파일 후 ⬇️

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

❷ mixin : 변수 사용 기능과 비슷하게, 중복되는 스타일 속성이 여러개가 있을때 하나로 묶어서 사용할 수 있다.

• mixin 활용방법이 다양하니 읽어보기!
  https://sass-lang.com/documentation/at-rules/mixin/

@mixin flexCenter {
	display: flex;
	justify-contents: center;
	align-items: center;
}

.info {
	@include flexCenter;
}

❸ nesting : 스타일 규칙의 계층 구조가 더 직관적으로 나타나기 때문에 코드 가독성이 좋아지고, 유지보수가 용이하다. 개인적으로 className이 중복되더라도 부모선택자가 다르면 사용이 가능하다는게 CSS와 비교했을때 참 편리하게 느껴졌던 부분이다.

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

컴파일 후 ⬇️ 

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

❹ &선택자 : 네스팅된 CSS 규칙을 작성할 때 편리하게 상위 요소의 선택자를 참조할 수 있다.

.button {
  background-color: #007bff;
  color: #fff;
  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

❺ variables.scss : 변수나 mixin을 통해 만들어 둔 스타일 속성을 컴포넌트처럼 import해서 쓸 수 있다.

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

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

.inverse {
	@include flexCenter;
  color: white;
}