Scss #6_1. mixin & include

Scss를 배워가면서 점점 활용도가 높고 잘사용하면 생산성이 높아질거같다는 생각을 하게된다.

 

그리고 난이도도 점점 높아지는듯 ...

 

이번에 공부한내용은 mixin과 include이다

 

이 기능은 css에서 함수를 만들어서 사용한다고 생각하면 편할거같다 ...

 

자주쓰는 css를 묶어서 정해놓는다거나 변수사용도 가능하다 해당부분은 나눠서 작성해둬야겠다.

 

일단은 가장간단한 사용방법이다.

 

선언할때는 @mixin 변수명이고 불러올때는 @include 변수명이다.

 

//scss file

@mixin sample {
  width: 100px;
  height: 100px;
  border: 1px sol red;
}

p {
  float: left;
  @include sample();
}

 

아래는 위의 scss파일을 컴파일 한 내용이다.

보이는것처럼 p태그에 위에서 mixin으로 선언했던 값들이 들어가있다.

 

//css file

p {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px sol red;
}

 

추가적으로 아래처럼도 사용가능하다. 상당히 범용성이 높아지는듯 

 

//scss file

@mixin clear {
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

div {
  border: 3px solid blue;
  @include clear();
}

 

위처럼 clear라는 mixin을 만들어둔후에 아래처럼 import시키면 자연스럽게 :after에 clear속성을 넣을수있다.

 

//css file

div {
  border: 3px solid blue;
}

div:after {
  content: "";
  display: block;
  clear: both;
}

 

업무에서 여러가지로 사용해보면서 숙지해야겠다.