@mixin center{
display: flex;
justify-content: center;
align-items: center;
}
@mixin box($size : 150px) {
width:$size;
height: $size;
background-color: aqua;
}
.container{
width: 400px;
height: 400px;
background-color: orange;
@include center;
.item{
@include center;
@include box(200px);
background-color: royalblue;
}
}
미리 정의해 두는..
마치 예전에 따로 중복되는 속성 재사용 하려고 클래스 만들어서 썼었던 것 처럼..
근데 얘네는 인자도 넣을 수 있음. 함수같은 느낌이 더 강함.
$size:150px 처럼 기본값도 가능함.
호출할 때 인자로 딱히 값을 안 주면 150px이고, 값을 주면 그게 $size가 됨.
참고로 scss는 호이스팅이 안된다고 함.