En este artículo, conoceremos Bulma CSS Mixins. Bulma CSS Mixins son los mixins que ayudan a los usuarios a agregar CSS reglas para el elemento HTML.
Bulma usos Hablar con descaro a mezclas para crear la salida CSS y se utilizan principalmente en el contexto del marco Bulma. Bulma tiene diferentes tipos de mezclas de CSS como se indica a continuación;
- Mezclas de bloques: Estos mixins CSS se utilizan para agregar espacios (margen/relleno) debajo de todos los elementos HTML, pero no después del último elemento secundario.
- Mezclas superpuestas: Estos mixins CSS se utilizan para agregar una cosa a otra para hacer que una página web sea interactiva.
- Mezclas centrales: Estos mixins CSS se utilizan para colocar un elemento con dimensiones fijas completamente en el centro de su clase principal más cercana.
- Mezclas de Sustitutos: Estas mezclas de CSS se utilizan para colocar la entrada solicitada por el usuario. Es una breve sugerencia para los usuarios que describe el valor esperado de un campo de entrada.
- Mezclas Clearfix: Estas mezclas de CSS se utilizan para agregar un ::después pseudo-elemento con un Limpia los dos regla.
- Restablecer mezclas: Estos mixins CSS se utilizan para crear un botón o cualquier otro elemento en el que no se pueda hacer clic.
- Mezclas no seleccionadas: Estos mixins CSS se utilizan para hacer que un elemento no se pueda seleccionar. Al usar esto, los usuarios pueden evitar que el texto se seleccione cuando se hace doble clic.
- Mezclas táctiles de desbordamiento: Estos mixins de CSS se utilizan para determinar si los dispositivos táctiles deben o no utilizar el desplazamiento basado en impulso para un elemento.
En cuanto al uso de mixins, Bulma no ha dado ninguna clase predefinida específica, pero creamos nuestras propias clases y las diseñamos con mixins SASS.
Sintaxis:
.bulma-[CSS Mixin Name]-mixin {
@include [CSS Mixin Name](params);
}Nota: Debe estar familiarizado con la implementación de SASS mixin para los ejemplos a continuación. mira el requisito previo dado en el enlace y luego aplicar el siguiente código.
Ejemplo 1: El siguiente ejemplo muestra los Mixins de Bulma Block.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <script src= </script> <link rel="stylesheet" href="gfgstyles.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"> <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(4rem);} |
Producción:
Ejemplo 2: El siguiente ejemplo muestra la combinación de toque de desbordamiento de Bulma.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <script src= </script> <link rel="stylesheet" href="gfgstyles.css"></head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h2 class="subtitle"> Bulma Overflow touch Mixin </h2> </div> <div class="container"> <div class="touch-scroll-mixin"> <p class="touch is-4"> Welcome to GeekforGeeks. Find programming articles, tutorials, and more. </p> </div> </div></body> </html> |
CSS
@mixin overflow-touch() { -webkit-overflow-scrolling: touch; width: 100%; overflow: auto;} .touch { width: 200%; border: 2px solid #eaf2f4; padding: 10px;} .touch-scroll-mixin { @include overflow-touch();} |
Producción:
Ejemplo 3: El siguiente ejemplo muestra la combinación de reinicio de Bulma en el botón Bulma.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <script src= </script> <link rel="stylesheet" href="gfgstyles.css"></head> <body> <div class="content container has-text-centered"> <div class="title is-1 has-text-success"> GeekforGeeks</div> <div class="title is-3">Bulma Reset Mixins</div> <div> <h4 class="button is-success"> Bulma default button </h4> <h4 class="button bulma-reset-mixin"> Bulma reset button </h4> </div> </div></body> </html> |
CSS
@mixin reset() { appearance: none; background: 0 0; border: none; font-family: inherit; font-size: 1em; margin: 0; padding: 0;} .bulma-reset-mixin { @include reset;} |
Producción:
Referencia: https://bulma.io/documentation/utilities/mixins/#css-mixins