Bulma Sass Mixin

用于自定义元素和其他 CSS 助手的实用 Mixin

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

元素 Mixin #

这些 Mixin 创建一个可视化的 HTML 元素。

箭头 #

arrow() Mixin 创建一个向下的箭头。 $color 参数定义箭头的颜色。

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

示例

HTML

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

Burger #

burger() Mixin 创建一个 16x16px 的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 #

delete() Mixin 创建一个包含十字的 20x20px 圆圈。它带有 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 #

loader() Mixin 创建一个 1em 的旋转圆圈。

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

示例

HTML

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

Font Awesome 容器 #

fa() Mixin 创建一个正方形内联块元素，非常适合包含 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 Mixin #

这些 Mixin 将 CSS 规则添加到元素。

Block #

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

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

示例

此元素具有 margin-bottom。

此元素也是。

不是这一个，因为它是最后一个子元素。

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 #

overlay() Mixin 使元素覆盖其最近的已定位祖先。
$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 #

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

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

示例

HTML

<div class="bulma-center-mixin-parent">
  <img class="bulma-center-mixin" height="96" width="96" src="/assets/images/unsplash/mEZ3PoFGs_k.jpg">
</div>

Placeholder #

placeholder() Mixin 允许您更改输入框占位符的样式。
$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 #

clearfix() Mixin 添加一个 ::after 伪元素，其中包含 clear: both 规则。

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

示例

这是一个简短的图像描述。

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

HTML

<div class="bulma-clearfix-mixin">
  <img height="80" width="80" style="float: left;" src="/assets/images/unsplash/La2kOu2dmH4.jpg">
  <p>This is a short image description.</p>
</div>

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

Reset #

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

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

示例

HTML

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

Unselectable #

unselectable() Mixin 使元素不可选择。这是为了防止双击时文本被选中。

.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 #

overflow-touch() Mixin 将 -webkit-overflow-scrolling: touch; 规则添加到元素。

方向 Mixin #

从左到右和从右到左的 Mixin #

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

Mixin @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() Mixin 是一种在处理定位元素时在 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="/assets/images/unsplash/iFgRcqHznqg.jpg">
  <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() mixin 的工作方式类似于 ltr-position() mixin，但允许您选择要设置的 CSS 属性。该 mixin 会将 -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="/assets/images/unsplash/jTSf1xnsoCs.jpg">
</div>

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

Bulma Sass Mixin

用于自定义元素和其他 CSS 助手的实用 Mixin

元素 Mixin #

箭头 #

Burger #

Delete #

Loader #

Font Awesome 容器 #

CSS Mixin #

Block #

Overlay #

Center #

Placeholder #

Clearfix #

Reset #

Unselectable #

Overflow Touch #

方向 Mixin #

从左到右和从右到左的 Mixin #

LTR 位置 #

LTR 属性 #

如何支持 Bulma