布尔玛模块化

在本文中，我们将了解Bulma 模块化。 Bulma 由 39 个 .sass 文件组成，用于根据不同的要求修改 HTML 元素。现在，只需导入您需要的文件，即可随时使用这些文件。假设我们只需要使用 Bulma sass 按钮文件，因此，我们可以将以下代码导入到您的my styles.scss文件中：

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

导入文件后，我们可以使用.button类及其所有修饰符，如下所示。

句法：

// Add below files in mystyles.scss file
@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

// Add below code in index.html in  tag.

  Button

注意：确保在您的 HTML 文件中链接mystyles.css文件。你会注意到 mystyles.css 文件是如何创建的，这可以通过使用带有 node-sass 的 Bulma 来实现。现在，下面我们用两个不同的示例演示了两个示例。

示例 1：下面的示例说明了创建 Bulma 列的 Bulma 模块化。

HTML

  

    

  

    

        
GeeksforGeeks
        
Bulma Modularity
  
        

            

              GFG Col 1
            
            

              GFG Col 2
            
            

              GFG Col 3
            
            

              GFG Col 4
            
            

              GFG Col 5
            
        
    

  

CSS

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
@import "bulma/sass/grid/columns.sass"

输出：

布尔玛模块化

示例 2：下面的示例说明了创建 Bulma 按钮的 Bulma 模块化。

HTML

  

    

  

    

        
GeeksforGeeks
        
Bulma Modularity
  
        
            Log In
        
  
        
            Sign Up
        
  
        
            Add
        
  
        
            Delete
        
    

  

CSS

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
@import "bulma/sass/elements/button.sass"

输出：

布尔玛模块化

参考： https://bulma.io/documentation/overview/modular