带插值的 SCSS 媒体查询

Question

我无法使用媒体查询标题作为插值。像下面这样使用它时会出现错误

$token-screen-md: "@media only screen and (min-width: 48rem)";
#{$token-screen-md} {
  display: table-row;
  min-width: 100%;
}

有人可以帮我解决这个问题吗？

“模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）： SassError：预期的选择器。 @media only screen and (min-width: 48rem){"

Answer 1

$mobile: "only screen and (max-width : 767px)"; 
$tablet: "only screen and (min-width : 768px)";
$desktop: "only screen and (min-width : 1025px)";

@media #{$mobile} {
  /* my styles for mobile displays */
}`

取自How to target two media queries using SASS interpolation?

带插值的 SCSS 媒体查询

SCSS media query with interpolation

css

sass

media-queries