Sass 使用伪选择器扩展

Posted 2023-02-21

【中文标题】Sass 使用伪选择器扩展

【英文标题】：Sass extend with pseudo selectors

【发布时间】：2013-06-15 10:22:57

【问题描述】：

我正在使用 compass 来管理 mac osx 上的一些 sass 文件。我有这些文件：

sass/
      screen.scss
            partials folder/
      ...
            _fonts.scss
            _functions.scss
      ...

在字体中我有这个规则，我想重用@extend。

//fonts.scss
.icon-ab-logo, 
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

.icon-ab-logo:before  //i want to reuse this.
content: "\e000";

在函数中我有这个 screen.scss：

.logo 
position: absolute;
top: 0;
bottom: 0px;
z-index: 500;
width: 9.5em;
background: $logo;
@include transition(all 0.2s);
   &:after
     @include icon( ".icon-ab-logo" );
   
 

最后在functions.scss中我称之为：

    @mixin icon( $icon )
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      @extend #$icon:before; //<- this is the problem, no errors just isn't parsed.
    

有没有办法在使用 mixin 之前引用 .icon-ab-logo:？解决方法？ 感谢阅读。

【参考方案1】：

似乎 SASS 不适用于扩展中的伪元素。

像这样解决这个问题：

%before-icon
  color: red

.foo
  /* Some styles here */

  &:before
    @extend %before-icon

结果：

.foo:before 
  color: red;


.foo 
  /* Some styles here */

另外，看起来你把事情复杂化了。您会发现您的代码难以掌握和维护。

PS 你应该在_mixins.scss 中保留mixin。

【参考方案2】：

当你想扩展一个伪类或伪元素时，你只想扩展父选择器（即冒号之前的所有内容）。

%foo:before 
  color: red;


.bar 
  @extend %foo;

生成：

.bar:before 
  color: red;

因此，对于您的实例，您想要做的是：

.icon-ab-logo, 
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;


%foo:before, .icon-ab-logo:before  //i want to reuse this.
    content: "\e000";


@mixin icon( $icon )
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    @extend #$icon;


.bar 
    @include icon('%foo');

请注意，您的 mixin 会生成 很多 样式，因此它并不适合大量重用。扩展它会更有意义。

【讨论】：

这确实有效。但是，是的，正如您所说，这不是一个好主意。感谢您花时间回答我的问题。

【参考方案3】：

如前所述，您应该尝试使用占位符类。另一方面，始终首先考虑@mixin，并尽量避免与@extend 嵌套。

【讨论】：

接受答案的核心原则是使用扩展。但是，使用扩展存在一些缺点。为什么你也想避免它？最大的缺点是使用扩展可能会变得非常混乱并且不尊重源顺序，如下所述：sitepoint.com/sass-extend-nobody-told-you.