首页 >web前端 >css教程 >如何在 Sass 媒体查询中扩展选择器?

如何在 Sass 媒体查询中扩展选择器?

Barbara Streisand
Barbara Streisand原创
2024-10-29 19:54:291000浏览

How to Extend Selectors in Sass Media Queries?

使用 Sass 扩展媒体查询中的选择器

问题:

一个想要嵌入 .当屏幕收缩时,.item.compact 中的项目,但 Sass 在尝试使用 @media 扩展时会抛出错误。如何在不复制样式的情况下实现这一目标?

答案:

不幸的是,Sass 禁止从媒体查询中扩展外部选择器。该限制需要替代方法:

1。使用 Mixin:

定义一个可重用的 mixin 来封装所需的样式。在媒体查询内部和外部,扩展此 mixin:

@mixin compact {
    // Styles for compact items
}

%compact {
    @include compact;
}

// Usage
.item {
    @extend %compact;
}

@media (max-width: 600px) {
    .item {
        @include compact;
    }
}

2。在媒体查询中嵌套扩展器:

此方法允许扩展在媒体查询之外定义的选择器:

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// Usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

3。等待 Sass 更新:

有关此限制的讨论正在进行中。实现解决方案可能需要更改 Sass 语法或功能。

以上是如何在 Sass 媒体查询中扩展选择器?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn