CSS , SCSS 를 사용하면서 가장 많이 사용하게 되는 '가운데 정렬'
보통 나는 해당 div에 아래와 같은 속성을 넣는다 .
div {
display : flex;
justify-contents : center ;
align-items : center;
}
작업을 하다보면 저렇게 일일히 입력해야 하는 번거로움이 정말 많았다 .
이걸 변수로 지정해서 사용할 수 있다!!!
코드는 아래와 같습니다 .
변수명을 지정해줄때는
@mixin 변수명 {
속성
}
@mixin 변수명
@mixin flexCenter {
display : flex;
justify-contents : center ;
align-items : center;
}
@mixin은 재사용 가능한 기능을 만드는 방식을 뜻하며, 이제 변수를 만들었으니 사용을 해봅시다.
사용을 할때는 @include 변수명
사용하는 코드는 아래와 같습니다.
(만약 'div'라는 태그에 '가운데 정렬'을 하고 싶다면 ???
div {
@include flexCenter;
}
이렇게 사용해주면 된다 !!!
빈 div안에는 내가 아무리 width ,height 값을 줘도 확인하기 어렵다.
그래서 나는 아래와 같이 test라는 변수를 만든다.
@mixin test {
width : 400px;
height : 400px;
background-color : green;
}
---------------------------------
.container {
@include test;
}
이런식으로 변수를 만들어 div 위치를 확인 하곤 한다 .