[React]Sass 재대로 못쓴거 블로깅으로 위로하기

• Wisely
  Wisely 클론 프로젝트를 하면서 Sass의 장점을 활용하지 못했다. 개인적으로는 아쉬움이 많이 남아서 간단한 예제를 통해 extend와 mixin문법을 정리해보려 한다.

mixin

찍어낼게~

• 사용법
  @mixin {이름} 으로 공통으로 쓸 속성들을 묶는다.
  @include {믹스인 이름} 으로 불러와 사용한다.

• 사용 예
  UI 레이아웃을 짜다보면 display : flex는 정말 많이 쓰인다. 이때 우리는 일일이 같은 코드를 중복해서 써야하고, felx-direction 같은 구조를 바꿔줘야 하는 경우가 생긴다. 그건 매우 비효율적인 일이다. 개인적으로 게으른 나는 이 문제를 mixin으로 해결하고 싶다.
  

extend

"확장" 기본틀에 덧 붙인다는 개념이다.

• 사용법
  기존에 존재하는 셀렉터를 @extend로 지정해주면 된다.

• 사용 예
  모든 버튼은 기본적으로 같은 width, height, border, font-size값을 가지면서 클래스에 따라 배경색과 글자색이 달라야 한다.

  코드 styles.scss 참고(슥~밀면 파일 나옴)