Bulma Sass 混合

用于自定义元素和其他 CSS 辅助工具的实用混合

在整个代码库中，Bulma 使用 Sass 混合来增强和促进 CSS 输出。虽然这些混合主要在 Bulma 的上下文中使用，但当然可以供你在自己的项目中重复使用。

元素混合 #

这些混合创建了一个可视HTML元素。

箭头 #

arrow()混合创建了一个朝下的箭头。$color参数定义箭头的颜色。

.bulma-arrow-mixin {
  @include mixins.arrow(purple);
}

示例

HTML

<span class="bulma-arrow-mixin"></span>

汉堡 #

burger()混合在一个正方形内创建了一组16x16像素的3个水平条。此正方形的尺寸由$dimensions参数定义。

.bulma-burger-mixin {
  @include mixins.burger(2.5rem);
}

示例

HTML

<button class="bulma-burger-mixin">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</button>

删除 #

delete()混合创建了一个20x20像素的圆，其中包含一个交叉。它有3个修饰符：is-small、is-medium和is-large。

.bulma-delete-mixin {
  @include mixins.delete;
}

示例

HTML

<button class="bulma-delete-mixin is-small"></button>
<button class="bulma-delete-mixin"></button>
<button class="bulma-delete-mixin is-medium"></button>
<button class="bulma-delete-mixin is-large"></button>

加载器 #

loader()混合创建了一个1em旋转圆。

.bulma-loader-mixin {
  @include mixins.loader;
}

示例

HTML

<span class="bulma-loader-mixin"></span>

Font Awesome容器 #

fa()混合创建了一个正方形内联块元素，非常适合包含Font Awesome图标或任何其他类型的图标字体。
第一个$size参数定义图标字体大小。
第二个$dimensions参数定义正方形容器的尺寸。

.bulma-fa-mixin {
  @include mixins.fa(1rem, 2rem);
  background-color: lavender; // For demo purposes
}

示例

HTML

<span class="bulma-fa-mixin">
  <i class="fas fa-thumbs-up"></i>
</span>

CSS混合 #

这些混合向元素添加CSS规则。

块 #

block()混合在元素下方添加间距，但仅当它不是最后一个子元素时。
$spacing参数定义margin-bottom的值。

.bulma-block-mixin {
  @include mixins.block(1rem);
}

示例

此元素有边距底。

此元素也有。

这个没有，因为它是最小子元素。

HTML

<p class="bulma-block-mixin">This element has a margin-bottom.</p>
<p class="bulma-block-mixin">This element too.</p>
<p class="bulma-block-mixin">Not this one because it's the last child.</p>

叠加 #

overlay() 混合使元素覆盖其最近定位的祖先元素。
$offset 参数定义元素从每个边缘（顶部、底部、左侧和右侧）向内定位的距离。

.bulma-overlay-mixin {
  @include mixins.overlay(1.5rem);
  background-color: darkorange;
  border-radius: 0.25em;
  color: white;
  opacity: 0.9;
  padding: 1em;
}

示例

覆盖元素

HTML

<div class="bulma-overlay-mixin-parent">
  <div class="bulma-overlay-mixin">Overlay element</div>
</div>

居中 #

center() 混合允许你将元素绝对定位在最近定位的祖先元素的中心，且元素具有固定尺寸。
$width 参数的值应为应用混合的元素的宽度。
除非元素具有正方形尺寸，否则需要第二个参数 $height，其值应为应用混合的元素的高度。

.bulma-center-mixin {
  @include mixins.center;
}

示例

HTML

<div class="bulma-center-mixin-parent">
  <img class="bulma-center-mixin" height="96" width="96" src="https://source.unsplash.com/mEZ3PoFGs_k/192x192">
</div>

占位符 #

placeholder() 混合允许你更改输入的占位符的样式。
$offset 参数定义元素从每个边缘（顶部、底部、左侧和右侧）向内定位的距离。

.bulma-placeholder-mixin {
  @include mixins.placeholder {
    color: lightblue;
  }
}

示例

HTML

<input
  class="input bulma-placeholder-mixin"
  type="text"
  placeholder="I am a styled placeholder"
>

清除浮动 #

clearfix() 混合添加一个带有 clear: both 规则的 ::after 伪元素。

.bulma-clearfix-mixin {
  @include mixins.clearfix;
}

示例

这是一张简短的图片描述。

此文本紧跟 clearfix 元素之后，并正确地放置在后面。

HTML

<div class="bulma-clearfix-mixin">
  <img height="80" width="80" style="float: left;" src="https://source.unsplash.com/La2kOu2dmH4/160x160">
  <p>This is a short image description.</p>
</div>

<p>This text is following the clearfix element and is correctly placed after.</p>

重置 #

reset() 混合应用软样式重置。这对于 <button> 元素特别有用。

.bulma-reset-mixin {
  @include mixins.reset;
}

示例

HTML

<button>Default button</button>
<button class="bulma-reset-mixin">Reset button</button>

不可选择 #

unselectable() 混合使元素不可选择。这是为了防止在双击时选择文本。

.bulma-unselectable-mixin {
  @include mixins.unselectable;
}

示例

此文本可选择。

此文本不可选择。

HTML

<p>This text is selectable.</p>
<p class="bulma-unselectable-mixin">This text is not selectable.</p>

触摸溢出 #

overflow-touch() 混合向元素添加 -webkit-overflow-scrolling: touch; 规则。

方向混合 #

从左到右和从右到左的混合 #

Bulma 有一个全局 $rtl 标志，它允许框架输出 CSS 的从右到左版本。默认情况下，此标志的值设置为 false。这意味着框架输出从左到右的版本。

混合 @mixin ltr 和 @mixin rtl 在此用于根据 $rtl 的值输出 CSS 规则

如果 $rtl: true，则 @include mixins.ltr 不输出任何内容
如果 $rtl: false，则 @include mixins.rtl 不输出任何内容

这对于特定于元素一侧的属性非常有用。

.bulma-ltr-rtl-mixin {
  background-color: lightgreen;
  padding: 0.5em 1em;
  border: 1px solid seagreen;
  margin-right: -1px;

  &:first-child {
    @include mixins.ltr {
      border-bottom-left-radius: 0.5em;
      border-top-left-radius: 0.5em;
    }

    @include mixins.rtl {
      border-bottom-right-radius: 0.5em;
      border-top-right-radius: 0.5em;
    }
  }

  &:last-child {
    @include mixins.ltr {
      border-bottom-right-radius: 0.5em;
      border-top-right-radius: 0.5em;
    }

    @include mixins.rtl {
      border-bottom-left-radius: 0.5em;
      border-top-left-radius: 0.5em;
    }
  }
}

示例

一二三

HTML

<div style="display: flex;">
  <span class="bulma-ltr-rtl-mixin">One</span>
  <span class="bulma-ltr-rtl-mixin">Two</span>
  <span class="bulma-ltr-rtl-mixin">Three</span>
</div>

LTR 位置 #

ltr-position() 混合是处理定位元素时，在 left 和 right CSS 属性之间快速切换的方法。
第一个 $spacing 参数定义偏移量的值，无论是向右还是向左。
第二个 $right 参数定义属性输出 right（默认）还是 left。

以下是输出内容，其中 $spacing 参数设置为 1rem

标志 →	`$rtl: false;`	`$rtl: true;`
`@include mixins.ltr-position(1rem, true)`	`right: 1rem`	`left: 1rem`
`@include mixins.ltr-position(1rem, false)`	`left: 1rem`	`right: 1rem`

Sass 源

.bulma-ltr-position-mixin {
  @include mixins.ltr-position(1rem, false);
  border-radius: 0.25em;
  position: absolute;
  top: 1rem;
}

CSS 输出

.bulma-ltr-position-mixin {
  left: 1rem;
  border-radius: 0.25em;
  position: absolute;
  top: 1rem;
}

示例

Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.

HTML

<div class="bulma-ltr-position-mixin-parent">
  <img class="bulma-ltr-position-mixin" height="48" width="48" src="https://source.unsplash.com/iFgRcqHznqg/96x96">
  <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
</div>

LTR 属性 #

ltr-property() 混合的工作方式类似于 ltr-position() 混合，但允许你选择要设置的 CSS 属性。混合将 -right 或 -left 附加到该属性。这对于 margin 和 padding 尤其有用。
第一个 $property 参数指定要“翻转”左右的属性。
第二个 $spacing 参数定义偏移量的值，无论是向右还是向左。
第三个 $right 参数定义属性输出 right（默认）还是 left。

以下是输出内容，其中 $spacing 参数设置为 1rem

标志 →	`$rtl: false;`	`$rtl: true;`
`@include mixins.ltr-property("margin", 1rem, true)`	`margin-right: 1rem`	`margin-left: 1rem`
`@include mixins.ltr-property("margin", 1rem, false)`	`margin-left: 1rem`	`margin-right: 1rem`

Sass 源

.bulma-ltr-property-mixin {
  @include mixins.ltr-property("margin", 1rem, false);
  border-radius: 0.25em;
}

CSS 输出

.bulma-ltr-property-mixin {
  margin-left: 1rem;
  border-radius: 0.25em;
}

示例

HTML

<div class="bulma-ltr-property-mixin-parent">
  <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
  <img class="bulma-ltr-property-mixin" height="96" width="96" src="https://source.unsplash.com/jTSf1xnsoCs/192x192">
</div>

从这里开始

功能

Sass 工具

自定义

CSS 库

CSS 辅助工具

赞助商

Bulma Sass 混合

用于自定义元素和其他 CSS 辅助工具的实用混合

元素混合 #

箭头 #

汉堡 #

删除 #

加载器 #

Font Awesome容器 #

CSS混合 #

块 #

叠加 #

居中 #

占位符 #

清除浮动 #

重置 #

不可选择 #

触摸溢出 #

方向混合 #

从左到右和从右到左的混合 #

LTR 位置 #

LTR 属性 #

如何支持 Bulma