En este artículo, conoceremos a los mixins de Bulma. Los mixins de Bulma ayudan a los usuarios a crear código CSS que se puede reutilizar en todo el sitio web.
Bulma usa mixins de Sass para crear la salida CSS y se usan principalmente en el contexto del marco de Bulma. Bulma tiene varios tipos diferentes de mixins como se indica a continuación;
- Elementos Mixins: estos mixins se utilizan para crear elementos HTML visuales.
- Mixins CSS: estos mixins se utilizan para agregar reglas CSS al elemento HTML.
- Mezclas de dirección: estas mezclas se utilizan para agregar alineación izquierda o derecha al elemento HTML.
- Mezclas de control de forma: estas mezclas se usan para botones y controles de forma creados en Bulma.
- Mixins receptivos: estos mixins se utilizan para definir varios estilos para diferentes tamaños de pantalla.
Para usar mixins, Bulma no da una clase específica, sino que creamos nuestras propias clases y las diseñamos usando mixins SASS.
Sintaxis:
.bulma-mixin {
@include mixin();
}
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 los Mixins de Bulma en un ícono de fuente impresionante.
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">GeeksforGeeks</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);
}
Producción:
Ejemplo 2: Este ejemplo ilustra el mixin Bulma clearfix.
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">GeeksforGeeks</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.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"> <h1 class="subtitle" style="font-weight:bold;"> Welcome to GeeksforGeeks </h1> <p>All in one place for computer science geeks!</p> </div> </div> </div> </body> </html>
CSS
@mixin clearfix() {
clear: both;
content: " ";
display: table;
}
.bulma-clearfix-mixin {
@include clearfix();
}
Producción:
Referencia: https://bulma.io/documentation/utilities/mixins/
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA