css - 更少的命名空间伪和其他选择器

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

# 伪选择器:

简而言之:你不能。只有 id 和 class(即分别为 # 和 .)选择器可以用作混合。伪选择器和标签选择器不能。参见 Mixins .

如果您打算重复使用某些样式，只需将它们定义为(参数)mixin:

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

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

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

#.class + .class:

#Namespace > .class + .class; // not working either

部分是因为上面(即不是每个选择器都可以用作混合)，但在这种特殊情况下你实际上仍然可以访问该选择器组合。虽然唯一"officially recommended"调用命名空间 mixin 的语法是:#namespace > .mixin，非正式的:“combinators”(例如 >、+、~ , whitespace etc.) 在编译器为 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 .