SCSS

css를 쓰다보면 scss나 sass를 요구하는 곳이 많다는걸 알게된다. 

SCSS 가 CSS 를 사용하는 것 보다 코드도 줄일 수 있고 다음 코드를 수정하는 사람이 봤을 때 가독성도 좋다. 웬만하면 사용하는 것을 추천한다고 한다. 유지 보수가 훨씬 쉽다. 그 이유는 밑에와 같은 기능을 사용할 수 있기 때문이다.

•  Variable (변수)

• Math Operators (수학 연산자)

• Built-in Functions (내장함수)

• Nesting (중첩)

• Import (불러오기)

• Extend (상속)

• Mixin (믹스인)

• Function (함수)

본인이 사용하는 개발 환경에서 css파일이 없고 scss파일이 자동으로 생성되고, 무슨 말인지 모르겠으면 그냥 SCSS파일 안에 내가 알던 CSS를 사용한다면 아무런  문제가 없다. CSS를 기본으로 깔고 가기 때문이다.

개인적으로 scss도입이 의미가 있다고 생각되는 강력한 기능은 변수 부분이다. 

변수는 밑에와 같이 생성할 수 있다. 

$main-color: #ddd;

이렇게 파일 맨 위에 생성을 하고 이렇게 정해진 색을 변수화 해서 스타일에 활용할 수 있다.

$main-color: #ddd;

body {
  background-color: $main-color;
}

scss를 보다보면 디자이너인 내 입장에서는 디자인 시스템을 운영하기에 정말 좋은 기술이라는 생각이 든다. 디자인 시스템에서 선언한 스타일을 한번에, 그리고 일관적으로 적용할 수 있기 때문이다.

참고 : https://velopert.com/1712