Question

我正在尝试在我的角度应用程序中为媒体查询创建一些常见的断点。我正在使用scss。我在各处重复这3行，并希望对其进行改进：

@media screen and (orientation: landscape) and (max-width: 959px), 
  screen and (orientation: portrait) and (max-width: 599px) {

@media screen and (orientation: landscape) and (max-width: 959px) {

@media screen and (orientation: portrait) and (max-width: 599px) {

我想创建一些包含此变量的变量，但是我没有得到，应该是这样的：

$mobile = "screen and (orientation: landscape) and (max-width: 959px), 
  screen and (orientation: portrait) and (max-width: 599px)"
$landscape_mobile = "screen and (orientation: landscape) and (max-width: 959px)"
$portrait_mobile = "screen and (orientation: portrait) and (max-width: 599px)"

有可能完成吗？

Answer 1

您可以创建一个mixin并在需要时使用它

@mixin breakpoint($point) {
  @if $point == desktop {
    @media (min-width: 1400px) { @content; }
  }
}

// Use like this
div {
  @include breakpoint(desktop) {
    display: none;
  }
}

Answer 2

变量是使用:而不是=定义的。

您可以通过以下方式使用它们：

$mobile: "screen and (orientation: landscape) and (max-width: 959px), 
  screen and (orientation: portrait) and (max-width: 599px)";
$landscape_mobile: "screen and (orientation: landscape) and (max-width: 959px)";
$portrait_mobile: "screen and (orientation: portrait) and (max-width: 599px)";

@media #{$mobile} { ... }
@media #{$landscape_mobile} { ... }
@media #{$portrait_mobile} { ... }

请注意插值语法#{}。
More about Sass interpolation

为媒体查询创建自定义断点

2 个答案: