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.
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< link rel = "stylesheet"
href = "style.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
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 >
|
@mixin block ($spacing) {
margin-bottom : $spacing;
} .bulma-block-mixin { @include block ( 2 rem);
} |
Output:
Example 2: Another example illustrating the Bulma Block Mixin.
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet"
href =
< script src =
</ script >
< link rel = "stylesheet" href = "style.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
has-background-warning
has-text-centered">
< img class = "bulma-block-mixin" src =
< br >
< img class = "bulma-block-mixin" src =
< br >
< img class = "bulma-block-mixin" src =
</ div >
</ body >
</ html >
|
@mixin block ($spacing) {
margin-bottom : $spacing;
} .bulma-block-mixin { @include block ( 2 rem);
} |
Output:
Reference: https://bulma.io/documentation/utilities/mixins/#block