Bulma Mixins Delete

In this article, we’ll learn about Bulma Delete mixin. The Delete mixin is an Element mixin used to create a square inline-block element so that users can use them for storing an icon, or group of icons of any type or category in them. This mixin has 3 types of modifiers that can be used to modify the content of the element. These modifiers are as follows:

• is-small
• is-medium 
• is-large

Bulma Delete Class: For creating a mixin, no specific class is provided by Bulma, instead we can create our class and then style the element with the help of SASS mixins.

Syntax:

<button class="bulma-delete-mixin [modifier]">
 // Statement
</button>

.bulma-delete-mixin {
 @include delete;
}

Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.

Example 1: Below example illustrates the Bulma Delete mixin without modifiers.

Output:

Example 2: Below example illustrates the Bulma Delete mixin with all 3 modifiers.

Output: