Question

在我的样式文件夹中，我有2个子文件夹mobile和desktop，它们都在主style/app.css文件中导入，如： @import 'mobile/mobile'; @import 'desktop/desktop';

工作正常。但我的情况是，这个导入需要拆分为2种不同的屏幕尺寸，所以我喜欢：

@media only screen and (max-device-width: 768px) {
 @import 'mobile/mobile';
}

@media only screen and (min-device-width: 769px) {
  @import 'desktop/desktop';
}

但不行。得到错误：

Error: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .text-uppercase" on line 237 of tmp/sass_compiler-input_base_path-7VVKdugf.tmp/bootstrap/_type.scss

我该如何解决这个问题？请帮帮我吗？

提前致谢。

Answer 1

需要在任何样式声明之前完成导入。但关于this回答，您可以执行以下操作：

<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="desktop.css">

Answer 2

您可以尝试这样的事情：

@media only screen and (min-device-width: 769px) {
    @import "desktop/desktop";
}

或者您可以在SASS中执行此操作：

@import url("desktop/desktop") only screen and (min-device-width: 769px);

并将生成：

let delay = SKAction.wait(forDuration: 1)

`@media query`抛出错误，导入不同的屏幕尺寸

2 个答案: