布尔玛米辛斯

在本文中，我们将了解 Bulma mixins。 Bulma mixins 帮助用户创建可以在整个网站重用的 CSS 代码。

Bulma 使用 Sass mixin 来创建 CSS 输出，它们主要用于 Bulma 框架的上下文中。 Bulma 有各种不同类型的 mixin，如下所示；

• 元素混合：这些混合用于创建可视化 HTML 元素。
• CSS Mixins：这些 mixin 用于向 HTML 元素添加 CSS 规则。
• 方向混合：这些混合用于向 HTML 元素添加左对齐或右对齐。
• 表单控件混入：这些混入用于在 Bulma 中创建的按钮和表单控件。
• 响应式混合：这些混合用于为不同的屏幕尺寸定义各种样式。

对于使用 mixins，Bulma 没有给出特定的类，而是我们创建自己的类并使用 SASS mixins 为它们设置样式。

句法：

.bulma-mixin {
    @include mixin();
}

注意：对于以下示例，您必须了解 SASS mixins 的实现。请查看链接上给出的先决条件，然后实现以下代码。

示例 1：下面的示例说明了字体真棒图标中的 Bulma Mixins。

HTML

  

    
    
    
    GFG
    
  
    
    

  

    
        GeeksforGeeks
        Bulma Mixins
  
        
            
        
  
    

  

CSS

@mixin fa($size, $dimensions) {
    font-size: $size;
    color: white;
    padding: 10px;
    width: $dimensions;
    background-color: black;
}
  
.bulma-fa-mixin {
    @include fa(4rem, 5rem);
}

输出：

示例 2：此示例说明了 Bulma clearfix mixin。

HTML

  

    
    
    
  
    
    
    
    

  

    
        GeeksforGeeks
        Bulma Mixins
  
        
            
                
                
                    Welcome to GeeksforGeeks
                
                  
All in one place for computer science geeks!
  
            
        
    

  

CSS

@mixin clearfix() {
    clear: both;
    content: " ";
    display: table;
}
  
.bulma-clearfix-mixin {
    @include clearfix();
}

输出：

参考： https://bulma.io/documentation/utilities/mixins/