CODEWITHSUNDEEP
csssassmedia-queries
webta.st.ic
webta.st.ic

Reputation: 5169

Calculate in media queries with SCSS

Is it possible to calculate in media queries when using SCSS and a variable?

I would like to assign a value to a breakpoint variable and in some cases calculate + 1 directly in the media query SCSS file like this:

$bp-xl: 1024px;

@media (min-width: $bp-xl + 1) { ... } /* MIN-WIDTH = 1025px */

So my new min-width would be 1025px.

Upvotes: 6

Views: 4212

Answers (2)

Brickers
Brickers

Reputation: 192

you can use calc(#{$bp-xl} + 1px);. calc does the calcuation, the #{} is string interpolation, which lets you insert a variable into calc

Upvotes: 4

Navdeep Singh
Navdeep Singh

Reputation: 181

Yes, It's Possible! Have a look for Demo! https://codepen.io/navdeepsingh/pen/qpejKo

h1 {
  font-size: 12px;
  background: green;
  color: white;
}

$bp-xl: 1024px;

@media (min-width: $bp-xl + 6) { 
  h1 {
    font-size: 50px;
    background: pink;
    color: black;
  }
} /* MIN-WIDTH = 1030px */
<h1>HELLO</h1>

Upvotes: 3

Related Questions