bootstrap SASS 분석

eunjye·2021년 8월 3일

UI개발

목록 보기

6/9

컴포넌트 별로 파일을 분리해놓음
- 필요 시 쉽게 찾아 수정할 수 있으며, 소스코드가 정리됨
- 소스가 길어지거나 파일이 많아지면 컴파일 시 느려질 수 있음
variables에서 지정한 속성값과 연관된 다른 속성을 일관적으로 지정할 수 있음
=> 즉, 변수값만 하나 바꿔줘도 연관된 요소들이 한번에 변경됨
(ex: $link-decoration이 underline이면 텍스트 버튼들은 모두 underline 속성을 가지게 함)
- 예외 케이스가 늘어난다면 이는 무의미해짐
조금이라도 긴 css속성 같은 경우 mixin으로 모두 뺌
- 사실상 gradient를 mixin으로 뺀 것은, 기존 css속성과 소스 상 길이 차이도 없으므로, 기존 css속성을 이용하는게 헷갈리지 않고 더 낫다고 생각
한 컴포넌트를 가공하기 위한 함수나 mixin이 여러 파일에 얽혀있음
map-merge를 이용하여 기존 변수에 값을 계속 더함
- 어떤 변수가 어떤 파일에서 쓰이고 재정의된 뒤 최종값이 리턴된 것인지 분석 필요
CSS 사용자지정 변수 사용

케이스가 방대하거나 컨텐츠성 페이지가 많을 경우 활용도가 떨어짐
활용할 수 있는 mixin이 존재한다는 것을 인지하지 못하여 활용하지 못하거나, 어떤 mixin이 있었는지 네이밍을 다시 찾느라 헤매일 수 있음
다량의 mixin과 함수 사용 시 직관적이지 않을 수 있음
변수를 각기 다른 파일에서 merge하거나 재가공하면 최종값이 무엇인지, 중간 단계에서 무슨값인지 파악하기 어려움

스타일링을 위한 클래스(my-2 등), 컬러나 모양 등의 생김새가 들어간 클래스명(btn-red, btn-round)은 최대한 사용을 지양
- 스타일링을 위한 클래스는 추후 변경되는 스타일에 대한 유지보수가 어려움
  (ex1. 컨텐츠 구분용 여백을 늘림
  ex2. 빨간색 버튼을 파란색으로 바꿈)
- 단, 공통적이지 않은 부분에 미세한 간격 조정이 필요하거나, 본문 컨텐츠 중 부분적으로 폰트 스타일을 달리 줘야할 경우를 위하여 스타일 클래스는 필요하긴 함
꼭 필요한 mixin, function, variable을 정리한 뒤, 가이드화 필요

그리드 너비
컬러 (primary, secondary / light, dark / disabled ...)
font style (font-family 종류, font-size 및 font-weight 강중약 ...)
(반응형 또는 모바일) device 별 breakpoint
(mobile-small:320 / mobile / tablet:1024 / PC / PC-wide)
공통적인 여백이나 radius 수치
transition 효과 (ex: ease-in .2s)