SASS CSS：子级的目标父类

Question

我正在使用SASS，发现有一个不便之处。这是我想做的一个例子：

.message-error {
    background-color: red;

    p& {
        background-color: yellow
     }
  }

预期的 CSS：

.message-error {
    background-color: red;
}
p.message-error {
    background-color: yellow ;
}

想法：所有带有 .message-error 的元素都将是红色的，除非它是 p.message-error。这不是现实生活中的情况，只是为了展示一个例子。

SASS 无法编译这个，我什至尝试过字符串连接。有没有一些插件可以做完全相同的事情？

笔记： 我知道我可以在下面放置另一个 CSS 定义，例如：

p.message-error{....}

...，但我想避免这种情况，并为所有 .message-error 定义使用一个位置。

谢谢。

Answer 1

从 Sass 3.4 开始，现在支持这一点。语法如下所示：

.message-error {
    background-color: red;

    @at-root p#{&} {
        background-color: yellow
    }
}

请注意 @at-root 指令和 & 符号上的插值语法。未能包含 @at-root 指令将导致选择器类似于 .message-error p.message-error 而不是 p.message-error代码>.

Answer 2

您可以将当前选择器分配给一个变量，然后在任意深度使用它：

.Parent {
  $p: &;

  &-Child {
    #{$p}:focus & {
      border: 1px solid red;
    }

    #{$p}--disabled & {
      background-color: grey;
    }
  }
}

Answer 3

Natalie Weizenbaum（Sass 的首席设计师和开发人员）表示永远不会支持它：

目前，& 在语法上与元素选择器相同，因此它
不能与一个同时出现。我认为这有助于澄清它可能在哪里
用过的;例如，foo&bar永远不会是一个有效的选择器（或者会
也许相当于 foo& bar 或 foo &bar）。 我不认为这个用途
案例足够充分，足以保证改变这一点。

来源：# 282 – Element.parent 选择器

据我所知，没有可能的解决方法。

Answer 4

最好的做法可能是这样（假设您的 .message-error 类中除了背景颜色之外还有更多内容）。

.message-error {
  background-color: red;
}

p.message-error {
  @extend .message-error;
  background-color: yellow
}

这种方法不提供紧密的分组，但您可以让它们彼此靠近。

Answer 5

我遇到了同样的问题，所以我为此做了一个 mixin。

@mixin tag($tag) {
  $ampersand: & + '';
  $selectors: simple-selectors(str-replace($ampersand, ' ', ''));

  $main-selector: nth($selectors, -1);
  $previous-selectors: str-replace($ampersand, $main-selector, '');

  @at-root {
     #{$previous-selectors}#{$tag}#{$main-selector} {
      @content;
    }
  }
}

为了使其工作，您还需要一个字符串替换函数（来自 Hugo Giraudel)：

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

---

它是如何工作的：

SCSS

.foo {
  color: blue;

  @include tag(p) {
    color: red;
  }
}

输出

.foo {
  color: blue;
}

p.foo {
  color: red;
}

用例
此方法适用于嵌套选择器，但不适用于复合选择器。

Answer 6

@Zeljko不可能通过SASS做你想做的事。

请参阅 Nex3 评论：https://github.com/nex3/sass/issues/286 #issuecomment-7496412

关键是“&”之前的空格：

.message-error {
    background-color: red;

    p & {
        background-color: yellow
     }
  }

而不是：

.message-error {
    background-color: red;

    p& {
        background-color: yellow
     }
  }

Answer 7

我认为如果你想让它们按父选择器分组，你可能需要添加一个公共父元素：

body {
    & .message-error {background-color: red;}
    & p.message-error {background-color: yellow}
}

当然，body可以替换为其他一些公共父元素，例如#Content< /code> 或另一个包含所有错误消息的 div 名称。

更新（另一个想法）

如果您利用@for 和 列表 然后看起来这应该可行（我不确定列表是否允许 . （句点）。

@for $i from 1 to 3 {
  nth(. p. ul., #{$i})message-error {
    background-color: nth(red yellow cyan, #{$i}));
  }
}

应该编译为类似以下内容：

.message-error {
   background-color: red;}
p.message-error {
   background-color: yellow;}
ul.message-error {
   background-color: cyan;}

Answer 8

我做了一个 mixin 来解决这个问题。

Github： https://github.com/imkremen/sass-parent-append

示例： https://codepen.io/imkremen/pen/RMVBvq

---

用法 (scss)：

.ancestor {
  display: inline-flex;

  .grandparent {
    padding: 32px;
    background-color: lightgreen;

    .parent {
      padding: 32px;
      background-color: blue;

      .elem {
        padding: 16px;
        background-color: white;

        @include parent-append(":focus", 3) {
          box-shadow: inset 0 0 0 8px aqua;
        }

        @include parent-append(":hover") {
          background-color: fuchsia;
        }

        @include parent-append("p", 0, true) {
          background-color: green;
        }
      }
    }
  }
}

结果 (css)：

.ancestor {
  display: inline-flex;
}
.ancestor .grandparent {
  padding: 32px;
  background-color: lightgreen;
}
.ancestor .grandparent .parent {
  padding: 32px;
  background-color: blue;
}
.ancestor .grandparent .parent .elem {
  padding: 16px;
  background-color: white;
}
.ancestor:focus .grandparent .parent .elem {
  box-shadow: inset 0 0 0 8px aqua;
}
.ancestor .grandparent .parent:hover .elem {
  background-color: fuchsia;
}
.ancestor .grandparent .parent p.elem {
  background-color: green;
}

Answer 9

我使用类似的解决方案创建了 package/mixin :)（也许它会对你有所帮助）

https:// github.com/Darex1991/BEM-parent-selector

这样写：

.calendar-container--theme-second-2 {
  .calendar-reservation {
    @include BEM-parent-selector('&__checkout-wrapper:not(&--modifier):before') {
      content: 'abc';
    }
  }
}

这个 mixin 只会为最后一个父级添加选择器：

.calendar-container--theme-second-2 .calendar-reservation__checkout-wrapper:not(.calendar-reservation--modifier):before {
   content: 'abc';
 }

有关存储库的更多信息。

Answer 10

我以前也遇到过这个问题。 Bootstrap 3 使用父选择器 hack 来处理这个问题。我为了自己的目的稍微调整了它......

@mixin message-error() {
  $class: '.message-error';
  #{$class} {
    background-color: red;
  }
  p#{$class} {
    background-color: yellow;
  }
}
@include message-error();

wheresrhys 使用上面类似的方法，但有一些 sass 错误。上面的代码允许您将其作为一个块进行管理并在编辑器中折叠它。嵌套变量也使其成为本地变量，因此您可以在需要应用此 hack 的所有实例中重用 $class 。请参阅下面的工作示例...

http://sassmeister.com/gist/318dce458a9eb3991b13

Answer 11

当我需要更改中间的某些元素时，我使用这样的 @mixin 函数
一棵萨斯大树的。

第一个参数是父元素、目标，第二个参数是应该具有的类。

SASS

@mixin parentClass($parentTarget, $aditionalCLass) {

    @at-root #{selector-replace(&, $parentTarget, $parentTarget + $aditionalCLass)} {
        @content;
    }
}

示例，

就像我需要改进强标记中的字体大小一样，当 .txt-target 也有 .txt-strong

HTML

   <section class="sample">
        <h1 class="txt-target txt-bold">Sample<strong>Bold</strong>Text</h1>
    </section>

SASS

section{
    .txt-target{
        strong{
            @include parentClass('.txt-target','.txt-bold'){
                font-weight:bold;
                font-size:30px;
            }
        }
    }
}

字体：

https://sass-lang.com/documentation/at-rules/at -root

这里可以看到一个名为 @mixin unify-parent($child) 的函数，如下所示

Answer 12

这个作弊可能会起作用，

 {
     $and: .message-error;
     #{$and} {
        background-color: red;
     }

     p#{$and} {
        background-color: yellow
     }
  }

您甚至可以使用 $& 作为变量名称，但我不能 100% 确定它不会抛出错误。

SASS 具有内置的作用域，这样就不必担心 $and 的值泄漏到样式表的其余部分

变量仅在嵌套选择器级别内可用
它们的定义位置。如果它们是在任何嵌套之外定义的
选择器，它们随处可用。

Answer 13

在当前版本：Selective Steve (3.4.14) 中，这现在是可能的，只需要更新一点您的代码：

.message-error {
    background-color: red;
    p &{
        background-color: yellow
     }
 }

这仅在您是一层嵌套时才有效，例如，如果您有这样的内容，则它不起作用：

.messages{
    .message-error {
        background-color: red;
        p &{
            background-color: yellow
         }
     }
 }