@mixin
으로 뽑아서 사용@mixin foo() {
...css 영역
}
// 반드시 앞에 '@include' 를 적어주어야 한다!
p {
@include foo():
}
생긴것과 같이 함수처럼 argument를 전달하여 확장성을 높일수 있다.
@mixin foo($color) {
color: $color;
}
p {
@include foo(blue);
}
default값 지정
@mixin foo($color: false) { // validation check // arg가 color 속성인 경우에만 컬러 속성 지정 @if (type-of($color) == color) { color: $color; } }
@mixin bar() {
@content;
}
@include bar() {
...css // @content로 지정한곳에 들어간다.
}
@mixin
은 @include
를 사용해야 했지만 @function
은 바로 사용 가능선언시 접두어 | 사용시 접두어 | 반환값 |
---|---|---|
@mixin | @include | css 코드 |
@function | 없음 | 특정한 값 |
@function _get-flex-value($key) {
// 특정한 값을 반환 한다.
@return map-get($flex-map, $key);
}
@mixin
과 하는 일은 비슷하다.선언시 접두어 | 사용시 접두어 | 용도 | 차이점 |
---|---|---|---|
@mixin | @include | 자주사용하는 코드 재사용 | arg ✔ |
% | @extend | 공통 스타일 상속 | arg ❌, 컴파일 후 연관있는 것들을 그룹화 |
%star-rating-base {
@include flexbox(start);
.ic-star {
color: $border;
&.is-active {
color: $blue;
}
}
}
.star-rating-13 {
@extend %star-rating-base;
font-size: 13px;
}