CODEWITHSUNDEEP
csssass
watzon
watzon

Reputation: 2549

Wondering if there's any way to simplify this SASS code

I'm using bourbon neat. What I have right now is this:

/*--------------------------------
          BREAKPOINTS
--------------------------------*/
$bp-xs: max-width 768px;
$bp-sm: max-width 992px;
$bp-md: max-width 1200px;
$bp-lg: min-width 1200px;


/*--------------------------------
            HELPERS
--------------------------------*/
.hidden-xs {
    @include media($bp-xs) {
        display: none;
    }
}
.hidden-sm {
    @include media($bp-sm) {
        display: none;
    }
}
.hidden-md {
    @include media($bp-md) {
        display: none;
    }   
}
.hidden-lg {
    @include media($bp-lg) {
        display: none;
    }   
}

I'm wondering if there is any way to simplify the code.

Upvotes: 0

Views: 55

Answers (1)

Bart Jedrocha
Bart Jedrocha

Reputation: 11570

You can use SASS control directives to reduce the amount of code you're writing but personally I don't see anything wrong with what you have currently

$breakpoints: (xs: max-width 768px, sm: max-width 992px, md: max-width 1200px, lg: min-width 1200px);

@each $name, $query in $breakpoints {
  .hidden-#{$name} {
    @media($query) {
      display: none;
    }
  }
}

Upvotes: 2

Related Questions