Question

我有一个嵌套的规则集（地图），如下图所示。

@typography: {
    @h1: {
        font: roboto;
        font-weight: 300;
        font-size: 9.6rem;
        line-height: 9.6rem;
        text-transform:none;
    }
}

我知道如何检索和输出诸如[font]之类的单个键，但是有什么方法可以返回和输出整个内部规则集？

.myclass {
    font: roboto;
    font-weight: 300;
    font-size: 9.6rem;
    line-height: 9.6rem;
    text-transform:none;
}

Answer 1

“当前无法通过这种方式（v3.9）”。

恐怕它无法正常工作（特别是地图本身）。直观地，它就像是这样：

#usage {
    @typography[@h1]();
}

但是目前尚未实现此功能（级联()和[]运算符）。

诸如“将感兴趣的规则集分配给临时变量然后'调用'之类的”第一猜测的解决方法也失败了：

#usage {
    @temp: @typography[@h1];
    @temp(); // error: not callable value
}

（实际上这是一个错误-我created专用票证）。

这一切将我们带到下一部分：

“考虑使用基于Mixin的地图”。

请注意，尽管“基于变量的映射”（又名DR）目前似乎是一种分布更广泛的模式，但在Less中有five different methods to define a map（并且这些方法有无数种排列方式来定义N-尺寸（又称“嵌套”）地图。

每种方法都有其优点和缺点，到目前为止，尚不清楚哪种方法被选为“首选”方法（从长远来看，趋向于使它们尽可能整齐地统一，但到目前为止还很遥远）那）。

现在查看您要表示的结构，该结构不遵循“变量-> @variable”原型。它看起来不像常规的CSS规则集吗？

.typography {
    .h1 {
        font:         roboto;
        font-weight:     300;
        font-size:    9.6rem;
        line-height:  9.6rem;
        text-transform: none;
    }
}

？

通过这种方式，您已经具有“基于混合图的映射”，您可以使用与使用“基于变量的映射”几乎相同的方式。（实际上，当前针对“地图”的documentation也建议这两种方法都不强制将其中任何一种作为“主要”方法。）
您需要对此“ CSS”结构进行的唯一修改是使其内部或外部（或两个）规则集成为参数混合（通过添加()），以便规则不会出现在已编译的默认情况下为CSS。

例如像这样：

.typography {
    .h1() {
...

或者这样：

.typography() {
    .h1 {
...

（此外，如果您更喜欢这些标识符，则可以使用#代替.）。

现在回到您的用例（解决方案）：

.typography {
    .h1() {
        font:         roboto;
        font-weight:     300;
        font-size:    9.6rem;
        line-height:  9.6rem;
        text-transform: none;
    }
}

#usage-1 {
    // "expand" the set of rules:
    .typography.h1(); // OK
}

#usage-2 {
    // use individual value from the map:
    r: .typography.h1[font]; // OK
}

#usage-3 {
    // iterate through:
    each(.typography.h1(), <...>); // OK
}

// etc.

毫不奇怪，扩展一组规则是混入首先被发明的目的。

要记住的“基于变量”和“基于混合”的映射之间唯一的根本区别（除了当前的局限性/用法）之外，“变量（和属性）覆盖” 和“规则集（以及混合集）级联” 。当您需要通过“外部代码”对CSS数据进行自定义/修改时，这可能会影响某些特定的细节（例如，在“主题/子主题”等中），但这是另一个大故事，所以我不再赘述在这里，尽管请参阅下一节的一些提示。

“杂项和变量互操作”。

（在用例的上下文中）还有另外一件关于混合的事情要理解。

如果我们将变量视为抽象的编程事物，即“与值关联的标识符（符号名称）”，我们很快就会看到 mixin 就是： a变量。

“ mixin”（其名称）实际上只是用于引用值的标识符，即-> 变量。

仅仅是标识符字符（前面的#或.）加上对它可以容纳的值的限制，这使得它必须由另一个标题（即“ mixin”）来引用”，而不是“变量”（如“ Less @variable”）。

换句话说，当涉及到“我有一些数据并且我需要一些东西（即“ a 变量”）来保存/表示它”时，重要的是不要自动落入“ a 变量（一般意义上）-> @variable“陷阱。

因此，回到Q时，要记住的另一个技巧是知道可以（几乎）彼此自由地分配/重新分配混合值和变量值（特别是如果它是“规则集”值）。即基本上，您可以创建一个变量以引用基于mixin的映射，并创建一个mixin引用基于变量的映射。这对于克服这两种方法的当前问题/局限性（主要是在使用中）可能是有价值的（或者如果您只是更喜欢@，.或#的“代码外观”，使用）。

以下是一些提示：

// ................
// "Universal" map:

.typography {
    .h1() {
        font:         roboto;
        font-weight:     300;
        font-size:    9.6rem;
        line-height:  9.6rem;
        text-transform: none;
    }


    @h1:  {.typography.h1}; // assign mixin to variable
    .h2() {@h1()}           // assign variable to mixin
    .h3() {.typography.h1}  // assign mixin to mixin
    @h2:  @h1;              // assign variable to variable
}

@typography:  {.typography}; // assign mixin to variable
.graphytypo   {.typography}  // assign mixin to mixin
// etc.

// ................
// Usage:

#usage-1 {
    // use individual values from the map (all roboto):
    1: .typography.h1[font];
    2: .typography[@h1][font];
    3: .typography.h2[font];
    4: .typography.h3[font];
    5: .typography[@h2][font];

    6: @typography[@h1][font]; // <- like your original map

    7: .graphytypo.h3[font];

    // etc.
}

#usage-2 {
    // expand a set of .h1 rules (all the same):
    .typography.h1();
    .typography.h2();
    .graphytypo.h3();
    // etc.
}

更少：如何从地图中获取整个规则集

1 个答案:

“当前无法通过这种方式（v3.9）”。

“考虑使用基于Mixin的地图”。

“杂项和变量互操作”。