Question

我有以下简单的scss：

.selector1,
.selector2 {
    /*Some properties*/

    &[disabled] {
        /*More properties*/
    }
}

然而，我想要做的是分别向父母提出，最简单的方法就是宣布规则不嵌套如下所示？

.selector1,
.selector2 {
    /*Some properties*/
}

.selector1[disabled] {
    /*Properties*/
}

.selector2[disabled] {
    /*Different properties*/
}

有没有办法在使用＆amp ;;时区分父选择器？选择器，所以我可以嵌套类似于第一个例子的规则？

Answer 1

使用selector manipulation functions可能有某种方法可以做到这一点，但是这将涉及到如此多的努力/代码，以至于根本不更容易嵌套。

对于您的具体示例，extend是一个选项：

%foo {
    /* stuff */
}

.one {
    @extend %foo;

    &[disabled] {
        /* different stuff */
    }
}

.two {
    @extend %foo;

    &[disabled] {
        /* other stuff */
    }
}

Answer 2

您不能，但您可以使用at-root属性来获得类似的结果。但是当你意识到声明规则是非嵌套的时候会更清晰。

.selector1,
.selector2 {
    /*Some properties*/

    &[disabled] {
     /*Some properties*/

     @at-root .selector1[disabled] {
       /*Different properties*/
     }
   }
}

输出将是：

.selector1,
.selector2 {
  /*Some properties*/
}

.selector1[disabled],
.selector2[disabled] {
  /*Some properties*/
}

.selector1[disabled] {
  /*Different properties*/
}

示例：http://sassmeister.com/gist/905436fde032bac27685

使用Sass＆符号（＆amp;）选择器寻址特定父级

2 个答案: