Sass 响应式变体

代码预处理混合支持响应式屏幕调整

from() and until() 变体 #

在CSS里面响应式是通过媒体查询media queries来实现, 参考 MDN documentation。

Bulma 提供了以下两个实用的变体：

```
@mixin from($breakpoint)
```
to target devices with a screen wider than or equal to the breakpoint
```
@mixin until($breakpoint)
```
to target devices with a screen narrower than the breakpoint

用法如下:

from() #

The from() mixin has a single parameter which sets the screen width from which the styles it contains will be applied:

Sass source

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

.my-element {
  background: red;

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

CSS output

.my-element {
  background: red;
}

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

For screens with a width of 1279px or less, the element's background will be red.
For screens 1280px-wide or more, the element's background will be blue.

until() #

The until() mixin has a single parameter which sets the screen width (minus 1px) until which the styles it contains will be applied.

This means that if you set a value of 1280px, the styles will be applied on a screen width of 1279px but not on a screen width of 1280px.

The reason for this 1px offset is to allow you to use both from() and until() with the same breakpoint value. This leaves no gap between the 2 sets of rules.

Sass source

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

$breakpoint: 1280px;

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

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

CSS output

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

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

For screens with a width of 1279px or less, the element's background will be green.
For screens 1280px-wide or more, the element's background will be orange.

Named mixins #

By having 4 breakpoints and supporting 5 screen sizes, Bulma can support a lot of different setups.

While you could use the mixins

@include mixins.from()

and

@include mixins.until()

, Bulma provides quick shortcuts with 11 named mixins.

These responsive mixins are named after the screen sizes and breakpoints used in Bulma, so that you can use them to create a responsive designs:

Mobile Between `0px` and `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD Between `1408px` and `px`
`@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 }`				-

Learn more about Bulma responsiveness.

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor