[SCSS] @extend, @each, @mixin, @include
Lpla
·2021. 1. 12. 20:34
반응형
1. @extend
특정 선택자의 css 요소를 그대로 다른 선택자에 상속한다.
하지만 아래 컴파일된 css에서 확인할 수 있듯이 기존 요소에 더하여 만들어진다. css가 단순하다면 문제 없지만 복잡하고 depth가 많아질수록 어디에 생성될지 예상하기 어렵고 오류가 발생할 수 있어 사용을 자제하는 것이 좋다.
SCSS
.green_box { color: #fff; background-color: green; border: 4px solid #000;
width: 300px; height: 300px; margin: 20px auto; }
.box { @extend .green_box; background-color: blue; }
Compile to CSS
.green_box, .box {
color: #fff;
background-color: green;
border: 4px solid #000;
width: 300px;
height: 300px;
margin: 20px auto;
}
.box {
background-color: blue;
}
결과
2. @each
list 반복문과 유사하게 사용할 수 있다. 쓸 일 자체는 많지 않지만, 동일한 요소에 조금씩 다른 스타일을 넣고 싶을 때 사용한다. 나는 대부분 색상 관련 작업을 할 때 사용한다.
SCSS
.color_box { width: 100px; height: 100px; margin: 20px auto; }
$colors : (red, orange, yellow, green, blue, indigo, purple);
@each $color in $colors {
$i: index($colors, $color);
.color_box {
&:nth-of-type(#{$i}) {
background-color: $color;
}
}
}
Compile to CSS
.color_box {
width: 100px;
height: 100px;
margin: 20px auto;
}
.color_box:nth-of-type(1) {
background-color: red;
}
.color_box:nth-of-type(2) {
background-color: orange;
}
.color_box:nth-of-type(3) {
background-color: yellow;
}
.color_box:nth-of-type(4) {
background-color: green;
}
.color_box:nth-of-type(5) {
background-color: blue;
}
.color_box:nth-of-type(6) {
background-color: indigo;
}
.color_box:nth-of-type(7) {
background-color: purple;
}
결과
3. @mixin, @include
위에서 언급한 @extend와 @each 와 달리 매우 유용하고 쓰임새가 많다. 좁게는 변수를 사용하여 css를 만드는데 사용되며, 넓게는 여러 파일들을 개별로 만들어 작업하고 최종적으로 하나의 css로 합쳐 수월한 파일 관리를 할 수 있다.
SCSS
@mixin background-color ($a) {
background-color: lighten($a, 20%);
border: 2px solid $a;
color: #fff;
}
.new_box { display: inline-block; padding: 50px; @include background-color(red) }
CSS
.new_box {
display: inline-block;
padding: 50px;
background-color: #ff6666;
border: 2px solid red;
color: #fff;
}
결과
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
_variables.scss
$color1: #465266;
$color2: #83AFFF;
@mixin animation ($delay, $duration, $name) {
animation-delay: $delay;
animation-duration: $duration;
animation-name: $name;
animation-iteration-count: infinite;
}
@mixin keyframe ($animation_name) {
@keyframes #{$animation_name} {
@content;
}
}
@include keyframe (MOVE) {
0%, 100% {
margin-top: 0;
}
50% {
margin-top: 300px;
}
}
style.scss
@import "variables";
body { margin: 100px auto; text-align: center; }
.box1 { position: absolute; left: 10%; padding: 100px; background: $color1; @include animation(0s, 3s, MOVE); }
.box2 { position: absolute; left: 30%; padding: 100px; background: $color2; @include animation(2s, 4s, MOVE); }
style.css
@-webkit-keyframes MOVE {
0%, 100% {
margin-top: 0;
}
50% {
margin-top: 300px;
}
}
@keyframes MOVE {
0%, 100% {
margin-top: 0;
}
50% {
margin-top: 300px;
}
}
body {
margin: 100px auto;
text-align: center;
}
.box1 {
position: absolute;
left: 10%;
padding: 100px;
background: #465266;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-name: MOVE;
animation-name: MOVE;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.box2 {
position: absolute;
left: 30%;
padding: 100px;
background: #83AFFF;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-name: MOVE;
animation-name: MOVE;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*# sourceMappingURL=style.css.map */
결과
반응형
