ダウンロード

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

Bulma Sass Mixins

カスタム要素やその他のCSSヘルパーのためのユーティリティミックスイン

Bulmaはコードベース全体で、CSS出力を強化し、促進するためにSassミックスインを使用しています。これらのミックスインは主にBulmaのコンテキスト内で使用されますが、もちろん、独自のプロジェクトで再利用することもできます。

要素ミックスイン #

これらのミックスインは、視覚的なHTML要素を作成します。

矢印 #

arrow()ミックスインは、下向きの矢印を作成します。$colorパラメータは、矢印の色を定義します。

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

例

HTML 

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

バーガー #

burger()ミックスインは、正方形内にグループ化された3つの水平バーの16x16pxセットを作成します。この正方形の寸法は、$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()ミックスインは、十字を含む20x20pxの円を作成します。これには、is-small、is-medium、およびis-largeの3つの修飾子が付属しています。

.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パラメータは、アイコンフォントサイズを定義します。
2番目の$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);
}

例

この要素には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()ミックスインは、要素をその最も近い位置指定された祖先をカバーするようにします。
$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パラメータの値は、ミックスインが適用される要素の幅である必要があります。
要素が正方形の寸法でない限り、2番目のパラメータ$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;
    }
  }
}

例

1 2 3

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パラメータは、右または左にかかわらず、オフセットの値を定義します。
2番目の$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パラメータは、左右に「反転」するプロパティです。
2番目の$spacingパラメータは、右または左にかかわらず、オフセットの値を定義します。
3番目の$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;
}

例

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

Bulmaを支援する方法

一度限りの寄付

スポンサーをご覧ください

毎月の寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#