Bulma Sass Extends
Bulma Sass Extends
Bulma에서는 많은 요소가 같은 스타일 집합을 공유해요. mixin도 공유를 가능하게 하지만, 사용할 때마다 CSS 규칙을 반복하게 되지요. 이런 반복을 피하기 위해 Bulma는 @extend 규칙을 사용합니다. Sass placeholder로 스타일을 공유하는 방법을 알아볼게요.
출처: 문서
본문
Bulma에서는 많은 요소가 같은 스타일 집합을 공유해요. mixin이 공유를 가능하게 하지만, 사용할 때마다 CSS 규칙을 반복하게 됩니다. 이 반복을 피하기 위해 Bulma는 @extend 규칙을 사용해요. 이 규칙은 Sass에게 한 선택자가 다른 선택자의 스타일을 상속하도록 알려줍니다.
사용되지 않을 수도 있는 CSS 클래스를 스타일 집합의 원본으로 만들지 않기 위해, Bulma는 Sass placeholder를 사용해요.
%control%unselectable%arrow%block%delete%loader%overlay%reset
이 placeholder들은 각각 대응하는 mixin의 @extend 버전입니다 (여기서는 control mixin 기준).
Bulma extends 사용법 (How to use Bulma extends)
extend 규칙을 @use로 불러오고 @extend로 사용하세요.
@use "bulma/sass/utilities/extends";
.my-control {
@extend %control;
background-color: purple;
color: white;
}