Bulma CSS Mixins

Last Updated : 06 Oct, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet"
          href="gfgstyles.css"> 
</head> 
    
<body> 
    <div class="content container has-text-centered"> 
        <h1 class="title has-text-success"> 
          GeekforGeeks 
        </h1> 
        <h1 class="subtitle">Bulma Block Mixin</h1> 
    </div> 
    
    <div class="container subtitle  
                has-text-centered  
                has-background-success"> 
        <h1 class="bulma-block-mixin"> 
          This header has a spacing of margin-bottom. 
        </h1> 
        <h1 class="bulma-block-mixin"> 
          This header too. 
        </h1> 
        <h1 class="bulma-block-mixin"> 
          This does not because it's the last header/child. 
        </h1> 
    </div> 
</body> 
    
</html>

CSS

@mixin block($spacing) { 
    margin-bottom: $spacing; 
} 
    
.bulma-block-mixin { 
    @include block(4rem); 
}

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet"
          href="gfgstyles.css"> 
</head> 
    
<body> 
    <div class="content container has-text-centered"> 
        <h1 class="title has-text-success"> 
          GeekforGeeks 
        </h1> 
        <h2 class="subtitle"> 
          Bulma Overflow touch Mixin 
        </h2> 
    </div> 
    
    <div class="container"> 
        <div class="touch-scroll-mixin"> 
            <p class="touch is-4"> 
                Welcome to GeekforGeeks. Find programming 
                articles, tutorials, and more. 
            </p> 
        </div> 
    </div> 
</body> 
    
</html>

CSS

@mixin overflow-touch() { 
    -webkit-overflow-scrolling: touch; 
    width: 100%; 
    overflow: auto; 
} 
    
.touch { 
    width: 200%; 
    border: 2px solid #eaf2f4; 
    padding: 10px; 
} 
    
.touch-scroll-mixin { 
    @include overflow-touch(); 
}

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet"
          href="gfgstyles.css"> 
</head> 
    
<body> 
    <div class="content container has-text-centered"> 
        <div class="title is-1 has-text-success"> 
            GeekforGeeks</div> 
        <div class="title is-3">Bulma Reset Mixins</div> 
    
        <div> 
            <h4 class="button is-success"> 
              Bulma default button 
            </h4> 
            <h4 class="button bulma-reset-mixin"> 
              Bulma reset button 
            </h4> 
        </div> 
    
    </div> 
</body> 
    
</html>

CSS

@mixin reset() { 
    appearance: none; 
    background: 0 0; 
    border: none; 
    font-family: inherit; 
    font-size: 1em; 
    margin: 0; 
    padding: 0; 
} 
    
.bulma-reset-mixin { 
    @include reset; 
}