인스타그램 클론을 하면서 React와 더불어 Sass라는 CSS Preposessor를 알게 되었다. 하지만 nesting외 별다른 기능을 써보지 않았고, 결국 마음 한 구석 짐이 되어버렸다..!
새로운 것을 배울 때 오는 불편함을 이기지 못하고 계속 미뤘던 Sass!
이참에 제대로 한 번 써보고자 Sass에 대해 알아보았다!
@mixin
을 통해 스타일을 선언하고, @include
를 통해 원하는 곳에 적용할 수 있다. 이때 함수와 같이 인자를 받는 형식을 만들면 다양한 활용이 가능하다!
@include flexbox;
//row 방향의 center와 같다.
@include column-flexbox;
//column 방향의 center와 같다.
@include flexbox(between);
//jc는 space-between, ai는 defualt값인 center
@content
를 통해 block 안에 스타일 속성을 입력할 수 있다. @extend
를 통해 사용할 수 있다.percentage() : 퍼센트로 계산
round() : 반올림
ceil() : 올림
floor() : 내림
abs() : 절대값
min(a, b) : 작은 값 반환
max(a, b) : 큰 값 반환