SCSS MIXINS 재활용
css를 변수화 혹은 반복할수 있는 점이 scss의 최고의 장점이라고 생각합니다
혹은 함수화를 통해서 무궁무진하게 재활용하여 편리하게 웹사이트를 구축하는데 도움이 되기에 정리를 해보고 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| @mixin center
{
display: flex;
justify-content: center;
align-items:center;
}
@mixin box($size:100px){
width: $size;
height: $size;
background-color: tomato;
}
.container{
@include center;
.item{
@include box(100px);
}
}
|
위의 코드를 풀면
1
2
3
4
5
6
7
8
9
10
11
| .container {
display: flex;
justify-content: center;
align-items: center;
}
.container .item {
width: 100px;
height: 100px;
background-color: tomato;
}
//사이즈가 지정되지 않았기때문에 기본사이즈인 100px가 들어가게 된다.
|
코드수가 많아질수록 위와 같은 변수화와 함수화는 코드 압축에 큰 도움이 된다고 할수 있습니다.
사이트 프로젝트 만들때 자주 쓸 예정입니다