속성 재활용

@mixin을 통해 반복되는 속성을 지정해 재활용해 사용이가능하고, @include를 통해 사용 가능.

// scss
@mixin center {
	display: flex;
    justify-content: center;
    align-items: center;
}
.contatiner {
	@include center;
    .item {
    	@include center;
    }
}
.box {
    @indclude center;
}

// css compile
.contatiner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contatiner .item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

인수를 이용한 속성 재활용

//scss
//변수를 이용해 매개변수 형태로 사용이 가능하며, :뒤에 기본 값을 지정할 수 있음. js의 함수와 유사.
@mixin box ($size: 80px, $color: tomato) {
    width: $size;
    height: $size;
    background-color: $color;
}
.container {
    @include box(200px, red);
    //인수는 배개변수 배열순서대로 입력해야한다.
    .item{
        @include box($color: green);
        //인수 선택자라는 개념으로 특정인수값만 변경이가능하고 나머지는 기본값이 적용된다.
    }
}
.box {
    @include box;
    //소괄호 입력후 값지정이 없으면 기본값이 적용된다.
    font-size: 20px;
}

//css compile
.container {
  width: 200px;
  height: 200px;
  background-color: red;
}
.container .item {
  width: 80px;
  height: 80px;
  background-color: green;
}

.box {
  width: 80px;
  height: 80px;
  background-color: tomato;
  font-size: 20px;
}