Bulma Sass レスポンシブ Mixin

各画面サイズに対して異なるスタイルを定義できるmixin

Bulmaはデフォルトでレスポンシブです。 Bulmaのレスポンシブについて詳しくはこちら.

from()とuntil() mixin #

CSSのレスポンシブはメディアクエリに基づいています（MDNドキュメントを参照）。

Bulmaは2つの便利なレスポンシブmixinを提供します:

```
@mixin from($breakpoint)
```
ブレークポイント以上の画面幅のデバイスをターゲットにする
```
@mixin until($breakpoint)
```
ブレークポイント未満の画面幅のデバイスをターゲットにする

使い方は非常に簡単です

from() #

from() mixinには、それを含むスタイルが適用される画面幅を設定する単一のパラメーターがあります

Sassソース

@use "bulma/sass/utilities/mixins";

.my-element {
  background: red;

  @include mixins.from(1280px) {
    background: blue;
  }
}

CSS出力

.my-element {
  background: red;
}

@media screen and (min-width: 1280px) {
  .my-element {
    background: blue;
  }
}

画面幅が1279px以下の場合、要素の背景は赤色になります。
画面幅が1280px以上の場合、要素の背景は青色になります。

until() #

until() mixinには、それを含むスタイルが適用される画面幅（-1px）を設定する単一のパラメーターがあります。

つまり、1280pxの値を設定した場合、スタイルは1279pxの画面幅に適用されますが、1280pxの画面幅には適用されません。

この1pxのオフセットの理由は、同じブレークポイント値でfrom()とuntil()の両方を使用できるようにするためです。これにより、2つのルールセットの間にギャップは残りません。

Sassソース

@use "bulma/sass/utilities/mixins";

$breakpoint: 1280px;

.my-element {
  @include mixins.until($breakpoint) {
    background: green;
  }

  @include mixins.from($breakpoint) {
    background: orange;
  }
}

CSS出力

@media screen and (max-width: 1279px) {
  .my-element {
    background: green;
  }
}

@media screen and (min-width: 1280px) {
  .my-element {
    background: orange;
  }
}

画面幅が1279px以下の場合、要素の背景は緑色になります。
画面幅が1280px以上の場合、要素の背景はオレンジ色になります。

名前付きmixin #

4つのブレークポイントと5つの画面サイズをサポートすることで、Bulmaは多くの異なる設定をサポートできます。

mixinを使用することもできますが

@include mixins.from()

と

@include mixins.until()

、Bulmaは11個の名前付きmixinでクイックショートカットを提供します。

これらのレスポンシブmixinは、Bulmaで使用されている画面サイズとブレークポイントに基づいて名前が付けられているため、それらを使用してレスポンシブデザインを作成できます。

モバイル最大`768px`	タブレット `769px`から`1023px`の間	デスクトップ `1024px`から`1215px`の間	ワイドスクリーン `1216px`から`1407px`の間	FullHD `1408px`以上
`@use "bulma/sass/utilities/mixins"; @include mixins.mobile { // Styles applied // below $tablet }`	-
-	`@use "bulma/sass/utilities/mixins"; @include mixins.tablet { // Styles applied // above $tablet }`
-		`@use "bulma/sass/utilities/mixins"; @include mixins.desktop { // Styles applied // above $desktop }`
-			`@use "bulma/sass/utilities/mixins"; @include mixins.widescreen { // Styles applied // above $widescreen }`
-				`@use "bulma/sass/utilities/mixins"; @include mixins.fullhd { // Styles applied // above $fullhd }`
-	`@use "bulma/sass/utilities/mixins"; @include mixins.tablet-only { // Styles applied // between $tablet // and $desktop }`	-
-		`@use "bulma/sass/utilities/mixins"; @include mixins.desktop-only { // Styles applied // between $desktop // and $widescreen }`	-
-			`@use "bulma/sass/utilities/mixins"; @include mixins.widescreen-only { // Styles applied // between $widescreen // and $fullhd }`	-
`@use "bulma/sass/utilities/mixins"; @include mixins.touch { // Styles applied // below $desktop }`		-
`@use "bulma/sass/utilities/mixins"; @include mixins.until-widescreen { // Styles applied // below $widescreen }`			-
`@use "bulma/sass/utilities/mixins"; @include mixins.until { // Styles applied // below $fullhd }`				-

Bulmaのレスポンシブについて詳しくはこちらをご覧ください。

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー