使用SCSS计算媒体查询

Question

使用media queries和变量时，是否可以在SCSS中计算？

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

$bp-xl: 1024px;

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

所以我的新最小宽度为1025px。

Answer 1

您可以使用calc(#{$bp-xl} + 1px);。 calc执行计算，#{}是字符串插值，可让您将变量插入calc

Answer 2

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