较少的命名空间伪和其他选择器

Question

如何使用伪选择器引用命名空间类？

#Namespace{
    .class:focus{
        prop: value;
    }
    .class + .class{
        prop: value;
    }
}

.anotherClass{
    #Namespace.class:focus(); //this does not work
    #Namespace.class:focus; //not working
    #Namespace > .class:focus(); //this does not work
    #Namespace > .class:focus; //not working
    #Namespace > .class + .class; //not working either
}

Answer 1

＃pseudo-selectors：

简而言之：你做不到。只有id和class（即分别为#和.）选择器可用作mixins。伪和标签选择器不能。请参阅Mixins。

如果您打算重复使用某些样式，请将它们定义为（参数化）mixin：

#namespace {
    .whatever-suitable-name() {
        prop: value;
    }

    .class:focus {
        .whatever-suitable-name();
    }
}

.anotherClass {
    #namespace > .whatever-suitable-name();
}

＃。class + .class：

  

#Namespace > .class + .class; //无法正常工作

部分是因为上面的原因（即并非每个选择器都可以用作mixin），但在这种特殊情况下，你实际上仍然可以访问该选择器组合。虽然调用命名空间mixin的唯一"officially recommended"语法是：#namespace > .mixin，非正式地：“组合者”（例如>，+，~，空白等。当编译器匹配mixin调用的选择器时，基本上忽略了），所以：

#namespace {
    .class + .class {
        prop: value;
    }
}

.anotherClass {
    #namespace > .class > .class; // OK
    #namespace .class .class;     // OK
    #namespace.class.class;       // OK
    #namespace.class > .class;    // OK
    // etc.
}

另见#1205。