import scss for Bootstrap customizing

[hayeon17kim]

Description

부트스트랩에서 사용하는 primary, danger 등의 컬러를 하나하나 css로 바꿔주고 있는데 이 방식은 너무 비효율적인 것 같다. 유지보수를 위해 다른 방법을 찾아보고 있다.

Solution

한편 부트스트랩에서 커스터마이징할 때 scss를 사용하여 그냥 $primary $danger 와 같은 부트스트랩의 기본 변수값을 원하는 색으로 바꿔서 사용하라고 말하고 있는데(https://getbootstrap.com/docs/5.0/customize/overview/ ), 이것은 scss 라는 툴로 가능하다.

Progress

• SCSS 코드 작성
• SCSS를 표준 CSS로 컴파일
• 프로젝트에 적용

[hayeon17kim]

SCSS란?

scss 는 css preprocessor로, CSS의 불편함을 상쇄하기 위해 나온 툴이다. css 문법과 매우 유사하지만 선택자의 중첩, 조건문, 반복문, 다양한 단위의 연산 등 css보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다. 단 웹에서는 직접 동작하지 않으니 우선 scss로 코드를 작성하고, 이를 웹에서 동작 가능한 표준의 CSS로 컴파일하면 된다.