En este artículo, aprenderemos sobre Bulma Mixins Block . Este es un mixin que agrega espacio (margen/relleno) debajo de todos los elementos del HTML pero no después del último elemento secundario. Aquí, usamos un parámetro $spacing para agregar o definir el valor del parámetro para agregar un espaciado.
Bulma no da una clase específica para crear una mezcla de bloques. Necesitamos crear nuestra propia clase y diseñarla usando mixins SASS.
Sintaxis:
.bulma-block-mixin {
@include block(2rem);
}
Nota: debe conocer la implementación de mixins SASS para los siguientes ejemplos. Consulte el requisito previo proporcionado en el enlace y luego implemente el siguiente código.
Ejemplo 1: El siguiente ejemplo ilustra el 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"> 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>
CSS
@mixin block($spacing) {
margin-bottom: $spacing;
}
.bulma-block-mixin {
@include block(2rem);
}
Producción:
Bloque Mixins de Bulma
Ejemplo 2: Otro ejemplo que ilustra el 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"> 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= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"> <br> <img class="bulma-block-mixin" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"> <br> <img class="bulma-block-mixin" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"> </div> </body> </html>
CSS
@mixin block($spacing) {
margin-bottom: $spacing;
}
.bulma-block-mixin {
@include block(2rem);
}
Producción:
Bloque Mixins de Bulma
Referencia: https://bulma.io/documentation/utilities/mixins/#block
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA