Sass

Sass는 CSS로 해석되고 컴파일되는 스크립트 언어다.

Sass에는 Nesting 기능을 비롯해 변수 및 연산자, mixin 등의 기능이 있다.

설치

우선 sass를 설치하기 위해서 터미널 상 내 위치를 westagram-project로 이동하고,
npm install node-sass --save를 입력한다.

그러면, 해당 디렉토리의 node-modules 폴더에 node-sass 폴더가 생성되고,
package.json 파일에 해당 파일명과 버전이 쓰여진다.

나는 기존에 css로 style 작업을 했기 때문에, .css 파일의 확장자를 모두 .scss로 변경했다.

기능 적용

Sass의 Nesting 기능을 적용하면, 코드의 양을 줄이고 연관된 코드끼지 그룹핑할 수 있어서 코드의 중복을 줄일 수 있다.
이는 효율적으로 데이터를 다루고 유지보수를 쉽게 하는 데 효율적이다.

또한, $theme-color: 색상;을 이용하면, 전역에서 사용되는 백그라운드 컬러를 지정할 수 있다.