🤠 프로젝트 들어가기 앞서
인스타그램 클론을 하면서 React와 더불어 Sass라는 CSS Preposessor를 알게 되었다. 하지만 nesting외 별다른 기능을 써보지 않았고, 결국 마음 한 구석 짐이 되어버렸다..!
새로운 것을 배울 때 오는 불편함을 이기지 못하고 계속 미뤘던 Sass!
이참에 제대로 한 번 써보고자 Sass에 대해 알아보았다!
⚒ Mixin의 활용
@mixin을 통해 스타일을 선언하고, @include를 통해 원하는 곳에 적용할 수 있다. 이때 함수와 같이 인자를 받는 형식을 만들면 다양한 활용이 가능하다!
📌 flexbox
- 기본값을 center로 정하고, 인자를 받아서 다양하게 사용 가능하다.
@include flexbox;
//row 방향의 center와 같다.
@include column-flexbox;
//column 방향의 center와 같다.
@include flexbox(between);
//jc는 space-between, ai는 defualt값인 center
- 이때 함수를 선언해서 객체 형태로 정의한 flex-map에 대하여 vlaue를 뽑아낸다. 그러면 이제 더이상 길게 space-around할 필요없이!! around만 입력하면 끝!!
📌 position
- 기본 타입을 absolute로 정하고, 이상한 값을 넣었을 때는 적용되지 않도록 조건문을 걸어주었다.
-> position에 들어갈 수 있는 값은 fixed 또는 absolute뿐!
📌 responsive
@content를 통해 block 안에 스타일 속성을 입력할 수 있다.
⚒ 그 외
📌 place-holder
- mixin과 유사하나, 인자를 받을 수 없다.
- 공통 스타일을 place-holder로 만들고, 원하는 위치에
@extend를 통해 사용할 수 있다.
📌 built-in-function
-
percentage() : 퍼센트로 계산
-
round() : 반올림
-
ceil() : 올림
-
floor() : 내림
-
abs() : 절대값
-
min(a, b) : 작은 값 반환
-
max(a, b) : 큰 값 반환
