how to use Bulma breakpoints to write responsive css

user_601862 0
Viewed 2325

I'm using Bulma to do styling

here are codes(all.sass) I have tried to make my Desktop responsive, but all failed:

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

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

or 

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

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

or

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

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

or

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

      =tablet
        transform: translate(0,-180%)
bulma sass css
1 Answers

You can use include the scss variables for media queries.

@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;
}
user_56184600
Related