Sass 变体

代码预处理混合，方便快速调用

贯穿于整个代码库, Bulma使用Sass变体来加强CSS的表现; 这些变体仅仅适用于Bulma的场景下, 你复用到自己的项目中去。

元素变体 #

这可以把HTML元素扩展为可视化的效果。

箭头图标 Arrow #

arrow() 变体体现为向下的箭头, $color 参数可以定义箭头的颜色。

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

Example

HTML

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

汉堡图标 Burger #

burger() 体现为 16x16px 三条水平线的汉堡图标; 方格的尺寸可以通过$dimensions参数来进行设定。

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

Example

HTML

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

删除图标 Delete #

delete() 体现为在 20x20px 圆圈内包含删除的图标; 还包含另外三种尺寸, is-small, is-medium and is-large。

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

Example

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() 定义1em大小的加载圆环。

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

Example

HTML

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

FontAwesome图标容器 container #

fa() 变体是行内块元素, 是FontAwesome图标的理想容器, 也可以作为其它图标的容器。
$size 定义图标的尺寸大小。
$dimensions 定义容器的大小。

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

Example

HTML

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

CSS 变体 #

把CSS语法加入到元素中。

块元素 Block #

block() 变体可以添加元素的间距, 但是最后一个子元素除外。
$spacing 定义margin-bottom的属性值。

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

Example

This element has a margin-bottom.

This element too.

Not this one because it's the last child.

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() 可以覆盖父元素带来的样式。 The overlay() mixin makes the element cover its closest positioned ancestor.
$offset 可以定义元素在上下左右的偏移距离。 The $offset parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).

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

Example

Overlay element

HTML

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

居中 Center #

center() 可以根据设定的尺寸对元素进行绝对定位, 把元素固定在父元素的居中位置。 The center() mixin allows you to absolutely position an element with fixed dimensions at the center of its closest positioned ancestor.
$width 可以定元素的宽度。 The value of the $width parameter should be the width of the element the mixin is applied on.
除非元素是正方形的尺寸, 第二个参数$height是需要设定的, 这个值会作为元素的高度。 Unless the element has square dimensions, the second parameter $height is required and its value should be the height of the element the mixin is applied on.

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

Example

HTML

<div class="bulma-center-mixin-parent">
  <img class="bulma-center-mixin" height="96" width="96" src="https://src.ydc.asia/webpic/logo_ck_bgblue.png">
</div>

预设值 Placeholder #

placeholder() 允许修改输入框的样式。 The placeholder() mixin allows you to change the style of an input's placeholder.
$offset 定义元素在上下左右方向上的偏移距离。 The $offset parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).

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

Example

HTML

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

浮动 Clearfix #

The clearfix() mixin adds a ::after pseudo-element with a clear: both rule.

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

Example

This is a short image description.

This text is following the clearfix element and is correctly placed after.

HTML

<div class="bulma-clearfix-mixin">
  <img height="80" width="80" style="float: left;" src="https://src.ydc.asia/webpic/logo_sq_bgblue.png">
  <p>This is a short image description.</p>
</div>

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

重置 Reset #

The reset() mixin applies a soft style reset. This is especially useful for <button> elements.

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

Example

HTML

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

不可编辑 Unselectable #

unselectable() 把元素配置为不可选中状态, 防止文本双击后被选中。 The unselectable() mixin makes an element not selectable. This is to prevent the text to be selected when double-clicked.

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

Example

This text is selectable.

This text is not selectable.

HTML

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

Overflow Touch #

The overflow-touch() mixin add the -webkit-overflow-scrolling: touch; rule to the element.

变体方向性 Direction Mixins #

从左到右和从右到左 #

Bulma具备一个全局$rtl 标记, 允许框架输出CSS从右到左的版本。默认情况下, 这个标记的值是false, 这意味着常规情况下, 框架的常规输出值是从左到右。

@mixin ltr和@mixin rtl的CSS输出值是根据$rtl 的值来确定:
The mixins @mixin ltr and @mixin rtl are here to output CSS rules based on the value of $rtl:

if $rtl: true, @include mixins.ltr outputs nothing
if $rtl: false, @include mixins.rtl outputs nothing

This is useful for properties that are specific to the side of an element.

.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;
    }
  }
}

Example

One Two Three

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() 变体可以快速切换CSS属性里左右的位置。
第一个$spacing 参数可以定义偏移的数值。
第二个$right 参数可以定义CSS属性输出值是在右边(默认值), 还是左边。
The ltr-position() mixin is a quick way to switch between left and right CSS properties when dealing with positioned elements.
The first $spacing parameter defines the value of the offset, whether it's right or left.
The second $right parameter defines if the property outputs right (default) or left.

以下是$spacing 参数设置为1rem的效果:

标记 Flag →	`$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 source

.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;
}

Example

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://src.ydc.asia/webpic/logo_sq_bgred.png">
  <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 Property #

ltr-property() 变体跟ltr-position() 基本相同, 区别在于它允许你选择CSS属性进行配置, 可以把-right 或 -left 放入到属性里面; 这对于margin 和 padding 会非常有用。
第一个$property 参数是确定配置左边还是右边。
第二个$spacing 参数是定义朝或右偏移的数值。
第三个$right 参数定义属性输出到右（默认值）还是左。
The ltr-property() mixin works like the ltr-position() mixin but allows you to choose which CSS property to set. The mixin will append -right or -left to that property. This is especially useful for margin and padding.
The first $property parameter which property you want to "flip" left and right.
The second $spacing parameter defines the value of the offset, whether it's right or left.
The third $right parameter defines if the property outputs right (default) or left.

以下是把$spacing 配置为1rem 的效果：

标记 Flag →	`$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 source

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

CSS output

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

Example

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://src.ydc.asia/webpic/logo_sq_bgred.png">
</div>

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Sass 变体

代码预处理混合，方便快速调用

元素变体 #

箭头图标 Arrow #

汉堡图标 Burger #

删除图标 Delete #

加载图标 Loader #

FontAwesome图标容器 container #

CSS 变体 #

块元素 Block #

样式叠加 Overlay #

居中 Center #

预设值 Placeholder #

浮动 Clearfix #

重置 Reset #

不可编辑 Unselectable #

Overflow Touch #

变体方向性 Direction Mixins #

从左到右和从右到左 #

LTR 位置 #

LTR Property #

赞助