scss @mixin의 재활용(초깃값 설정과 키워드인수설정) / @content 추가기능

/*재활용 mixin*/
/*mixin A()는 객체 변수할당과 동일
()안에 매개변수를 넣어줄수 있고, 초깃값을 설정 가능 */

//scss
@mixin box($size:100px,$color:tomato){
    width:$size;
    height:$size;
    background-color:$color;
    @content;
}

.container{
    @include box(200px,red);
    .item{
        /*키워드인수-인수의값이 해당키워드로 직접 들어감*/
        @include box($color:green);
    }
}

.box2{
    @include box{
        /*content기능*/
        bottom:0;
        left:0;
        margin:auto;
    }
}


//css
@charset "UTF-8";
/*재활용 mixin*/
/*mixin A()는 객체 변수할당과 동일
()안에 매개변수를 넣어줄수 있고, 초깃값을 설정 가능 */
.container {
  width: 200px;
  height: 200px;
  background-color: red;
}
.container .item {
  /*키워드인수-인수의값이 해당키워드로 직접 들어감*/
  width: 100px;
  height: 100px;
  background-color: green;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: tomato;
  /*content기능*/
  bottom: 0;
  left: 0;
  margin: auto;
}