Bulma Sass Extends

Sass extends to keep your CSS code DRY

In Bulma, a lot of element share a set of styles. While mixins allow sharing, they repeat the CSS rules everytime they are used.

To avoid the repetition, Bulma uses the @extend rule to share code. This rule tells Sass that one selector should inherit the styles of another. Learn more about the extend rule.

Instead of creating CSS classes that might not be used to be the source of the set of styles, Bulma uses Sass placeholders:

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

Each of these placeholders are simply the @extend version of their corresponding mixins (here for the control mixin).

How to use Bulma extends #

Import the extend rules with @use and use them with @extend:

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

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

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Bulma Sass Extends

Sass extends to keep your CSS code DRY

How to use Bulma extends #

How to support Bulma