[내일의집] Sass 활용하기 : 변수, 그리드

공부라고 생각하지 말고, 더 편하고 재밌어지기 위한 과정이라고 보자!

작은 조각부터 하나하나!

 

01 변수 만들기

 

1. 선언하기
   
   1. 이름 앞에 $ 붙이고 : 로 선언
   2. 대소문자 구분,  - _ 123 사용가능, BUT 숫자로 시작할 수 없음.
   3. 값으로는 CSS에서 사용되는 모든 것 넣을 수 있음. (key, value, declaration, string, bolean, map)
2. 호출하기
   1. $+이름으로 사용
   2. JS와 마찬가지로 스코프 고려해서 호출하기 (웬만하면 같은 이름으로 선언하지 말자)

 

02 컬러팔레트, 타이포그래피

1. 컬러 네이밍
   • 스케일 없고 특징적인 색 : 심플한 이름 붙이기
   • 메인 컬러와 그 variations : 메인 컬러 + 변화(dark, light, clicked) 등으로 붙이기
   • grayscale : 보통 텍스트, 배경, 보더 3가지로 사용됨. 역할 따라 붙이거나(text, primary, secondary, shadow) 기타 구분하기 쉬운 방법으로 붙이기
2. 타이포그래피 설정
   1. font-size, line-height, letter-spacing 를 세트로 묶는 게 바람직 (놓치기 쉬움)
   2. fonts.scss에 유형별로 정해진 font도 함께 선언해 주면 후에 관리가 쉬움
   3. 역으로 reset.scss에 선언된 변수를 적용해 기본 세팅
   4. +@ mozila에서 font smoothing가져다가 reset에 적용

03 그리드 시스템

1. 그리드 시스템 읽기
   • column 수, unit 너비, gutter 너비, margin 유무를 찾을 수 있어야 한다.
   • 너비는 px이 아니라 화면너비 대비 %일 수도 있다
   • 컨텐츠는 unit 안에만 배치한다. gutter까지 삐져나가지 않음. 컨텐츠 배치 가능한 영역을 container라고 함.
   • 모바일/태블릿/pc 그리드 변형 기준이 되는 화면너비값을 break point라고 함. 이 때 보통 gutter는 안 바뀜

2. 시스템의 여러 유형 (획일적으로 생각하지 않기!)

• 반응형이어서 %로 계산해야 하는 경우 (모바일)
• margin이 있는 경우 (반응형이라 너비를 %로 따질 시 column 영역 바깥의 여유공간)
• margin은 없지만 그리드 적용 범위가 px로 고정되어서 양 옆이 남는 경우

3. 용어 헷갈리지 말자 @.@

• css에서는 gutter와 margin 포함해 유의미한 전체 공간을 .container에 담는다. 그리드시스템의 container와는 다른 개념.
• 그리드시스템의 마진은 css에서 padding으로 표현됨.
• 용어의 함정에 빠지지 말고 그림과 개념을 머리에 그리면서 작업하기.

4. scss로 옮기기

• 먼저 필요한 숫자 값을 변수로 선언
• .container : padding으로 마진 값을 주고 margin auto로 가운데 정렬
• .row : flex로 가로 정렬하고, flex-wrap으로 컨텐츠 삐져나오지 않게.
• 모든 col : padding으로 양쪽에 gutter 값 주기
• .col-1, .col-2 등 너비값 계산 : 하나씩 적는거 x  for문 돌림 o

phone 사이즈 먼저 작업! [ ]는 css 속성선택자

• break point 이후는 미디어쿼리로 작업, 수정해야 하는 선언은 media 내부에서 업데이트(덮어쓰기)
• (태블릿) max-width의 경우, 컴퓨터는 마진(padding)을 포함해서 그 너비라고 이해하기 때문에 컨테이터 영역이 그만큼 좁아진다. $md-max-container 선언에 마진값만큼 더해주자.
• (PC) 각 unit 너비가 px로 고정되어 사실 max-width가 큰 의미는 없지만 그래도 설정해 주기. 같은 이유로 col width percent() 함수 말고 px 값으로 설정.

 

1. 사용하기
   • 마크업 작성 시 .container 밑에 바로 .raw 그 밑에 바로 .col- 사용해야 함!
   • 활용되는 col의 개수가 달라지고 레이아웃이 바뀌는 경우에만 여러 개 넣어 주면 됨. e.g. col-sm-4도 너비 100%, col-md-12도 너비 100%면 굳이 두 개 쓸 필요 없음.

 

 

오..... 김버그님이 유튭에서 '이런 것도 직접 못 만들고 bootstrap으로 한다고?'라는 말씀 하셨을 때

'그럼 그걸 어떻게 직접 짜요...?'라고 생각했는데 이게 되는 거였네 ^^완성되고 나서 css 코드 보니까 col 시스템이 width 제한 + flex-wrap 의 콜라보였다..!

pull memo로 ✨ implement a custom responsive grid system 적는데 본새 난다 ㅋㅋㅋㅋ

*) css.map 파일 보고 '이게 뭐지..'했는데 package.json의 scss에다 --source-map true 옵션으로 넣으면 개발자도구에서 css 라인 대신 scss 라인으로 디버깅 가능하게 하는 map이었다.