What is Bulma Mixins?

In this article, we will learn Bulma Mixins,This free Bulma tutorial for complete beginners will help you learn Bulma from scratch.

Bulma Mixins - ❤️Bulma Tutorials In 2024

In this article, we will know about Bulma mixins. Bulma mixins help the users create CSS code that can be reused throughout the website.

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 mixins as given below;

Element Mixins: These mixins are used to create visual HTML elements.
CSS Mixins: These mixins are used to add CSS rules to the HTML element.
Direction Mixins: These mixins are used to add left or right alignment to the HTML element.
Form Control Mixins: These mixins are used tor buttons and form controls created in Bulma.
Responsive mixins: These mixins are used to define various styles for different screen sizes.

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

Syntax:

.bulma-mixin {
    @include mixin();
}

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 Mixins in a font awesome icon.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>GFG</title> 
    <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="demo.css"> 
</head> 
  
<body> 
    <div class="container content "> 
        <h1 class="title has-text-success">w3wiki</h1> 
        <h1 class="subtitle">Bulma Mixins</h1> 
  
        <span class="bulma-fa-mixin"> 
            <i class="fab fa-github"></i> 
        </span> 
  
    </div> 
</body> 
  
</html>

CSS

@mixin fa($size, $dimensions) { 
    font-size: $size; 
    color: white; 
    padding: 10px; 
    width: $dimensions; 
    background-color: black; 
} 
  
.bulma-fa-mixin { 
    @include fa(4rem, 5rem); 
}

Output:

Example 2: This example illustrates the Bulma clearfix mixin.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
  
    <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="demo.css"> 
</head> 
  
<body> 
    <div class="container content "> 
        <h1 class="title has-text-success">w3wiki</h1> 
        <h1 class="subtitle">Bulma Mixins</h1> 
  
        <div class="container"> 
            <div class="bulma-clearfix-mixin has-background-warning p-4"> 
                <img height="80" width="80" 
                     style="float:right; border-radius:5rem;"
                    src= 
"https://media.w3wiki.net/wp-content/uploads/20220221132017/download.png"> 
                <h1 class="subtitle" style="font-weight:bold;"> 
                    Welcome to w3wiki 
                </h1> 
                <p>All in one place for computer science Beginner!</p> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

@mixin clearfix() { 
    clear: both; 
    content: " "; 
    display: table; 
} 
  
.bulma-clearfix-mixin { 
    @include clearfix(); 
}

Output: