[react 기록용, 쇼핑몰]2-8. style-sass_사스

//파일명.scss  -> 임포트하려는 파일의 상단에 import './파일명.scss';

// 다른 파일 임포트 가능
@import "./reset.scss";

//자주쓰는 값 변수로 저장 가능
$메인칼라: #ff0000;
.red {
  color: $메인칼라;
}

.my-alert {
  background: #eeeeee;
  padding: 20px;
  border-radius: 5px;
}

// 확장 가능
.my-alert-yellow {
  @extend .my-alert;
  background: #ffe591;
}

//함수로 정의해서 사용 가능
@mixin 함수() {
  background: #eeeeee;
  padding: 20px;
}
.my-alert-add {
  @include 함수();
}

// 네스팅 가능
 div.container h4 {
   color: blue;
 }
 div.container p {
   color:green;
 }

 div.container {
   h4 {
     color: blue;
   }
   p {
     color: green;
   }
 }