使用 SCSS 计算媒体查询

Question

media queries使用SCSSand 变量时可以计算吗？

我想为断点变量分配一个值，并在某些情况下+ 1直接在媒体查询SCSS文件中计算，如下所示：

$bp-xl: 1024px;

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

所以我的新最小宽度是1025px.

Answer 1

是的，这是可能的！看看演示！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>