mixins
- @mixins name($para)에서 정한 값 마지막에 @content하고
style.scss에서 @include name(“$para”)을 입력하면 mixins에서 정한값으로 적용됨
예시
//_minxins.scss//
@mixin name($para) {
@if $para == "A" {
color: blue;
@content;
}
}
//style.scss//
@import "_mixins";
h1 {
@include name("A") {
}
}
또다른 예시
<body>
<h1>Hello!</h1>
</body>
//_minxins.scss//
$minIphone: 500px;
$maxIphone: 690px;
$minTablet: $minIphone + 1;
$maxTablet: 1120px;
@mixin responsive($device) {
@if $device == "iphone" {
@media screen and (min-width: 400px) and (max-width: 500px) {
@content;
}
} @else if $device == "tablet" {
@media screen and (min-width: 501px) and (max-width: 600px) {
@content;
}
} @else if $device == "iphone-l" {
@media screen and (min-width: 601px) and (max-width: 700px) {
@content;
}
} @else if $device == "ipad-l" {
@media screen and (min-width: 701px) and (max-width: 800px) {
@content;
}
}
}
//style.scss//
@import "_mixins";
h1 {
color: red;
@include responsive("iphone") {
color: yellow;
}
@include responsive("iphone-l") {
font-size: 60px;
}
@include responsive("tablet") {
color: green;
}
@include responsive("ipad-l") {
color: pink;
}
}
댓글남기기