如何使用 Bulma 断点编写响应式 css

Question

我正在使用 Bulma 做造型

这里有代码（all.sass）我试图让我的桌面响应，但都失败了：

 @import "~bulma"
 .post-letter
      transform: translate(0,-110%)

      @include tablet
        transform: translate(0,-180%)

或

 .post-letter
      transform: translate(0,-110%)

 @import "~bulma"    
 +tablet-only
      transform: translate(0,-180%)

或

 @import "~bulma"
 .post-letter
      transform: translate(0,-110%)

      +tablet
        transform: translate(0,-180%)

或

 @import "~bulma"
 .post-letter
      transform: translate(0,-110%)

      =tablet
        transform: translate(0,-180%)

Answer 1

您可以将 scss 变量用于媒体查询。

@import "bulma/bulma.sass";

.hero{
    
    @include until($tablet) {
        background-image: url('./assets/img/bg/mobile.jpg')
    }
    @include from($tablet) {
        background-image: url('./assets/img/bg/desktop.jpg')
    }
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}