Bulma Mixins Block
In this article, we will learn about Bulma Mixins Block. This is a mixin that adds spacing (margin/padding) below all the elements of the HTML but not after the last child element. Here, we use a $spacing parameter to add or define the parameter value for adding a spacing.
There is no specific class given by Bulma for creating a block mixin. We need to create our own class and style it using SASS mixins.
Syntax:
.bulma-block-mixin { @include block(2rem); }
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: The below example illustrates the Bulma Block 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 = "style.css" > </ head > < body > < div class = "content container has-text-centered" > < h1 class = "title has-text-success" > GeekforBeginner </ h1 > < h1 class = "subtitle" >Bulma Block Mixin</ h1 > </ div > < div class="container subtitle has-text-centered has-background-success has-text-white"> < 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 ( 2 rem); } |
Output:
Example 2: Another example illustrating the Bulma Block 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 = "style.css" > </ head > < body > < div class = "content container has-text-centered" > < h1 class = "title has-text-success" > GeekforBeginner </ h1 > < h1 class = "subtitle" >Bulma Block Mixin</ h1 > </ div > < div class="container has-background-warning has-text-centered"> < img class = "bulma-block-mixin" src = "https://media.w3wiki.net/wp-content/uploads/20220221132017/download.png" > < br > < img class = "bulma-block-mixin" src = "https://media.w3wiki.net/wp-content/uploads/20220221132017/download.png" > < br > < img class = "bulma-block-mixin" src = "https://media.w3wiki.net/wp-content/uploads/20220221132017/download.png" > </ div > </ body > </ html > |
CSS
@mixin block ($spacing) { margin-bottom : $spacing; } .bulma-block-mixin { @include block ( 2 rem); } |
Output: