Question

我有以下示例代码：

.level1 {
   // css

  .level2 {
  // css

     . level3 {
     // css
     color: red;
  }
}

然后

.level1.blue .level .level3 {
  color: blue
}

我想把第二条规则以某种方式放在代码的第一位，这样我就不会再重复这个结构了，我上面有两种颜色可能，这是否可能呢？

Answer 1

我并没有打算回答我自己的问题，但似乎我发现了我正在寻找的东西，只是它最近才被添加到sass中，并将在sass 3.4上提供。我相信这是一个尝试的预发布，但我还没有尝试过。

基本上我在寻找的东西已经在github上找到了我：

https://github.com/sass/sass/issues/286#issuecomment-49112243

所以在3.4你可以这样做：

.level1 {
  .level2 {
    .level3 {
       @at-root #{selector-append(".blue", &)} {
        color: blue;
      }
      color: red;
    }
  }
}

这正是我所寻找的。

有一些与父选择器（＆amp;）相关的添加内容，您可以在https://github.com/sass/sass/issues/1117

了解更多内容

请记住，在撰写本答案时，所有这些都是新的。

另见：https://github.com/sass/sass/blob/master/doc-src/SASS_CHANGELOG.md 并且：http://www.phase2technology.com/blog/everything-you-need-to-know-about-sass-3-4/

Answer 2

此：

@mixin level3color($color) {
  .level2 {
    .level3 {
      color: $color;
    }
  }
}

.level1 {
  @include level3color(#FF0000);

  &.blue {
    @include level3color(#0000FF);
  }
}

产生这个：

.level1 .level2 .level3 {
  color: red;
}
.level1.blue .level2 .level3 {
  color: blue;
}

得爱mixins！

编辑：

这仍然非常干净（或者考虑到你正在尝试做的事情，至少是干净的），因为你仍然可以在那里拥有你的结构。

.level1 {
    // css

    .level2 {
        // css

        .level3 {
            // css
            color: red;
        }
    }

    &.blue   { @include level3color(blue); }
    &.yellow { @include level3color(yellow); }
}

Answer 3

一个简单的例子：

 .child{
    background-color:red;
    .parent:hover &{
      background-color:blue;
    }
  }

进入

.child {
  background-color: red;
}
.parent:hover .child {
  background-color: blue;
}

http://sassmeister.com/gist/e994e056d3cc3b342e2c

是否有可能引用另一个父母，而不仅仅是上述父母？

3 个答案: