[Sass]Sass를 왜 사용할 까?/ Next.js에 Sass설치하기

Sass 기초

🎈왜 Sass를 사용할 까?

• CSS에는 치명적인 단점이 존재
  • 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편
  • Sass는 코드를 수정하거나, 코드 조각을 재사용하기 편리!
• Sass의 의미
  • CSS의 단점을 메워 더 빠르고 효율적으로 스타일을 작성할 수 있는 구문
  • CSS전처리기
• 컴파일 과정

🎈Sass? SCSS?

• Sass 구문을 이용해 코드를 작성하면, Sass 전처리기가 이를 css로 변환
• Sass 구문과 동일한 기능을 제공함과 동시에 좀 더 CSS 친화적인 구문인 SCSS라는 구문도 존재
• SCSS 구문을 이용해 코드를 작성하면,Sass 전처리기는 이 또한 CSS로 변환
• 사람들이 Sass 구문보다 SCSS구문을 선호하는 경향이 있음
  • SCSS구문은 Sass 언어의 하위 개념

🎈Next.js에서 Sass 설치하기

터미널

npm i sass

next.config.js 수정

//next.config.js
const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

루트프로젝트에 있는 styles 폴더 내의 global.css와 Home.module.css 이름을 global.scss와 Home.module.scss로 바꾸고 해당 파일을 import 해주는 곳에서도 이름을 바꿀 것.

 

Reference

https://youtu.be/YqmJWF4o700

https://sezzled.tistory.com/127