/*재활용 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;
}
'프론트엔드 공부 > scss' 카테고리의 다른 글
scss @function(){} (0) | 2021.05.28 |
---|---|
scss 반복문(for $i from 1 from n){} (0) | 2021.05.28 |
scss 산술연산자 (0) | 2021.05.28 |
scss 변수 유효범위 (0) | 2021.05.27 |
상위선택자참조&(-,:), 네임스페이스 동일한경우의 중첩 (0) | 2021.05.27 |