如何简化Bulma框架中column列的重复响应式类名定义

以下两种方案都可以实现仅用一个类覆盖所有响应式断点的需求：

方案1：自定义全局CSS类（无需编译Sass） #

直接在项目全局样式中添加自定义类，匹配所有断点下的宽度规则即可，这里以四分之三宽度为例：

.column.is-three-quarters-all {
  flex: none;
  width: 75%;
}

使用时直接替换原有多个类即可：

<div class="column is-three-quarters-all"></div>

提示：你原有代码中的is-three-quarters-desctop存在拼写错误，正确写法为is-three-quarters-desktop。

方案2：Sass批量生成全尺寸全断点类（适合Sass编译Bulma的项目） #

如果你的项目通过Sass引入Bulma，可以基于Bulma内置的变量批量生成所有列宽对应的全断点类，无需逐个手动编写：

// 引入Bulma内置的工具和网格变量
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/grid/columns.sass";

// 批量生成所有列宽的全断点适配类
@each $size, $width in $columns-sizes {
  .column.is-#{$size}-all {
    @include mobile { width: $width; }
    @include tablet { width: $width; }
    @include desktop { width: $width; }
    @include widescreen { width: $width; }
    @include fullhd { width: $width; }
  }
}

生成后可直接使用所有Bulma支持的列宽对应全断点类，比如is-half-all、is-4-all、is-one-third-all等。

注意事项 #

• 仅需要个别尺寸的全断点类时，可单独编写对应规则，避免全量生成增加CSS体积
• 如果你自定义过Bulma的断点阈值，Sass方案会自动适配修改后的断点，无需额外调整

内容的提问来源于stack exchange，提问作者Čamo