Bulma CSS Mixins

In this article, we will know about Bulma CSS Mixins. Bulma CSS Mixins are the mixins that help the users to add CSS rules to the HTML element.

Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework. Bulma has various different types of CSS mixins as given below;

• Block Mixins: These CSS mixins are used to add spacing (margin/padding) below all the elements of the HTML but not after the last child element.
• Overlay Mixins: These CSS mixins are used to put one thing on another to make a webpage interactive.
• Center Mixins: These CSS mixins are used to absolutely position an element with fixed dimensions at the center of its closest positioned parent class.
• Placeholder Mixins: These CSS mixins are used to place the asking input from the user. It is a short hint for users that describes the expected value of an input field.
• Clearfix Mixins: These CSS mixins are used to add a ::after pseudo-element with a clear: both rule.
• Reset Mixins: These CSS mixins are used to create a button or any other element non-clickable.
• Unselectable Mixins: These CSS mixins are used to make an element not selectable. Using this users can prevent the text to be selected when double-clicked.
• Overflow Touch Mixins: These CSS mixins are used to allow whether or not the touch devices should use momentum-based scrolling for an element.

For using mixins, there is no specific predefined class given by Bulma rather we create our own classes and style them using SASS mixins.

Syntax:

.bulma-[CSS Mixin Name]-mixin {
 @include [CSS Mixin Name](params);
}

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 Block Mixins.

Output:

Example 2: Below example illustrates the Bulma overflow touch mixin.

Output:

Example 3: Below example illustrates the Bulma reset mixin in a Bulma button.

Output: