Bulma Sass Form Control Mixins
Bulma Sass Form Control Mixins
폼 컨트롤은 Bulma 프레임워크의 핵심 부분이에요. control() mixin은 이 폼 컨트롤들이 공유하는 일관된 스타일 집합을 제공하지요. 이를 사용해 추가 컨트롤을 만드는 방법을 알아볼게요.
출처: 문서
본문
Bulma에서 폼 컨트롤은 프레임워크의 필수적인 부분이에요. 여기에는 다음 요소들이 포함됩니다.
.button.input.select.file-cta,.file-name.pagination-previous,.pagination-next,.pagination-link,.pagination-ellipsis
control() mixin은 이 모든 폼 컨트롤이 공유하는 일관된 스타일 집합을 제공해요. 이를 사용해 추가 컨트롤을 만들 수 있습니다.
@use "bulma/sass/utilities/controls";
.bulma-control-mixin {
@include controls.control;
background: deeppink;
color: white;
}
Example
My control
HTML
<button class="bulma-control-mixin">
My control
</button>
크기 (Sizes)
컨트롤의 기본 font size는 $size-normal이에요. 또한 3개의 추가 mixin으로 접근할 수 있는 3가지 추가 크기가 더 있습니다.
@include controls.control-small;— font size$size-small@include controls.control-medium;— font size$size-medium@include controls.control-large;— font size$size-large
.bulma-control-mixin {
&.is-small {
@include controls.control-small;
}
&.is-medium {
@include controls.control-medium;
}
&.is-large {
@include controls.control-large;
}
}
Example
Small / Normal / Medium / Large
HTML
<button class="bulma-control-mixin is-small">
Small
</button>
<button class="bulma-control-mixin">
Normal
</button>
<button class="bulma-control-mixin is-medium">
Medium
</button>
<button class="bulma-control-mixin is-large">
Large
</button>
Control placeholder
control() mixin은 Sass placeholder %control 로도 존재합니다.
@use "bulma/sass/utilities/extends";
.bulma-control-extend {
@extend %control;
background: mediumblue;
color: white;
}
Example
My control
HTML
<button class="bulma-control-extend">
My control
</button>