不使用iframe，CSS媒体查询依旧生效

这段 SCSS 代码定义了用于处理响应式设计和媒体查询的功能和混合器。以下是对这段代码的逐行解释：

```scss
$mediaMinWidth: 1024px;
```

　　

定义了一个变量 `$mediaMinWidth`，其值为 1024 像素。

```scss
@function translate-media-condition($c) {
$condMap: (
"screen": "only screen",
">minWidth": "(min-width: #{$mediaMinWidth + 1})",
"<minWidth": "(max-width: #{$mediaMinWidth})",
// <=1200px
"md": ".ui-screen-md",
// <=1024px
"sm": ".ui-screen-sm",
// <=767px
"xs": ".ui-screen-xs"
);
@return map-get($condMap, $c);
}
```

 

这个函数 `translate-media-condition` 接受一个参数 `$c`，从一个映射表 `$condMap` 中获取对应的媒体查询条件或类名。比如：
- `"screen"` 返回 `"only screen"`
- `">minWidth"` 返回 `"(min-width: 1025px)"`
- `"<minWidth"` 返回 `"(max-width: 1024px)"`
- `"md"` 返回 `".ui-screen-md"`
- `"sm"` 返回 `".ui-screen-sm"`
- `"xs"` 返回 `".ui-screen-xs"`

```scss
@function responsive-media-condition($c) {
$condMap: (
"md": "only screen and (min-width: 1025px)",
"sm": "only screen and (max-width: 1024px)",
"xs": "only screen and (max-width: 767px)"
);
@return map-get($condMap, $c);
}
```

 

这个函数 `responsive-media-condition` 接受一个参数 `$c`，从一个映射表 `$condMap` 中获取对应的响应式媒体查询条件。比如：
- `"md"` 返回 `"only screen and (min-width: 1025px)"`
- `"sm"` 返回 `"only screen and (max-width: 1024px)"`
- `"xs"` 返回 `"only screen and (max-width: 767px)"`

```scss
@mixin media($args...) {
$query: "";
@each $arg in $args {
$op: "";
@if ($query != "") {
$op: " and ";
}
$query: $query + $op + translate-media-condition($arg);
}
@media #{$query} {
@content;
}
}
```

 

`media` 混合器接受多个参数 `$args...`，并将这些参数转换为媒体查询条件，通过 `translate-media-condition` 函数获取对应的查询条件。最终，使用 `@media` 来应用这些条件并包含混合器的内容。

```scss
@mixin responsive($arg) {
$query: translate-media-condition($arg);
$mediaCondition: responsive-media-condition($arg);
$self: &;
@media #{$mediaCondition} {
@content
};

@if ($arg != 'md') {
@at-root #{$query} #{$self} {
@content;
}
}
}
```

 

`responsive` 混合器接受一个参数 `$arg`，首先使用 `translate-media-condition` 函数获取查询条件 `$query`，然后使用 `responsive-media-condition` 函数获取响应式媒体查询条件 `$mediaCondition`。在媒体查询条件下包含混合器的内容。如果 `$arg` 不等于 `'md'`，则在根上下文中直接应用对应的类名和内容。

总结：
- 这段代码定义了一些函数和混合器来处理响应式设计中的媒体查询。
- `translate-media-condition` 和 `responsive-media-condition` 函数用于从映射表中获取对应的查询条件或类名。
- `media` 混合器用于将多个查询条件组合成一个媒体查询，并包含混合器的内容。
- `responsive` 混合器用于根据参数应用响应式媒体查询条件，并在根上下文中直接应用类名和内容（如果参数不是 `'md'`）。

这段 SCSS 代码实现了灵活的响应式设计，方便在不同的屏幕尺寸下应用不同的样式。

 

如下 case， 实际类名编译实现不同的media 生效 

编译前

.items {
    width: 100%;

    // max-width: 1024px
    @include responsive("sm") {
        width: 80%;
    }

    // max-width: 767px
    @include responsive("xs") {
        width: 60%;
    }
}

编译后

.items {
    width: 100%;
}
@media only screen and (max-width: 1024px) {
    .items {
        width: 80%;
    }
}
.ui-screen-sm .items {
    width: 80%;
}
@media only screen and (max-width: 767px) {
    .items {
        width: 60%;
    }
}
.ui-screen-xs .items {
    width: 60%;
}