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() 与相同的断点值一起使用。这在两组规则之间没有间隙。

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