CSS를 조금 더 우아하게 쓰기 위한 최소한의 SASS

SasS, 그게 우리 프로젝트에 도움이 됩니까?

사실, 간단한 프로젝트는 굳이 SaaS를 쓸 필요는 없다고 생각합니다.

Bootstrap, Tailwind 같은 CSS Library를 쓰는게 오히려 디자인적으로도 개발적으로도 편리한거 같아요. 하지만! 조금만 디자인을 신경쓰기 시작해도 필연적으로 CSS를 사용해야 하고 CSS를 사용하는건 (개인적으로 느끼기에) 상당히 불편하고 암걸리는 경험입니다.

이런 CSS를 개선시켜 주는게 SasS입니다.

---

도움이 되는 유용한 Sass 기능

• 변수
• Nesting
• Mixins
• 상속 (Inheritance)
• Partials
• Operators
• if-else

---

Sass를 React에서 사용하기 위해서는?

Sass는 브라우저가 이해할 수 없는 파일이기 때문에 보통의 CSS로 변환시켜주는 과정이 필요합니다. 대단한건 아니고, 그냥 Sass Package를 설치하면 됩니다.

npm install node-sass

---

CSS 라이브러리를 커스터마이징 할 때 Sass 사용하기 (feat. Bootstrap)

전반적으로는 Boostrap를 사용하고 싶은데, 일부 Component만 내 맘대로 바꾸고 싶을 때 Saas를 사용하면 편리하게 할 수 있습니다.

1. 우선 필요한 것들을 import 시켜 줍니다.

@import "node_modules/bootstrap/scss/bootstrap";
@import "./customBootstrap";

import 'bootstrap/dist/css/bootstrap.min.css'

 

2. @extend 사용해서 기존 Bootstrap Component의 값을 가져오고, 내가 원하는 값을 추가로 부여할 수 있습니다.

.btn-example {
	@extend .btn-primary
}

 

---