ダウンロード

Bulma Sass Extends

CSSコードをDRYに保つためのSass extends

Bulmaでは、多くの要素がスタイルのセットを共有しています。mixinは共有を可能にしますが、使用するたびにCSSルールを繰り返します。

この繰り返しを避けるために、Bulmaはコードを共有するために@extendルールを使用します。このルールは、あるセレクターが別のセレクターのスタイルを継承する必要があることをSassに伝えます。extendルールについて詳しくはこちら。

スタイルのセットのソースとなる、使用されない可能性のあるCSSクラスを作成する代わりに、BulmaはSassのプレースホルダーを使用します。

```
%control
```
```
%unselectable
```
```
%arrow
```
```
%block
```
```
%delete
```
```
%loader
```
```
%overlay
```
```
%reset
```

これらのプレースホルダーはそれぞれ、対応するmixin (ここではコントロールmixin)の@extendバージョンにすぎません。

Bulma extendsの使い方 #

@useでextendルールをインポートし、@extendで使用します

@use "bulma/sass/utilities/extends";

.my-control {
  @extend %control;
  background-color: purple;
  color: white;
}

Bulmaをサポートする方法

#native_company# #native_desc#