[SCSS] @mixin @include

Byunghoon Lee·2020년 8월 8일
0

HTML , CSS , SCSS

목록 보기
6/6
post-thumbnail

SCSS에도 변수 사용을 ???

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 위치를 확인 하곤 한다 .

profile
Never never never give up!

0개의 댓글