手写笔混合作为类名答案

【问题标题】：Stylus mixins as class names手写笔混合作为类名
【发布时间】：2021-06-06 01:11:33
【问题描述】：

使用 Less，我可以做到以下几点：

/* less code */
.grid {
    display: grid;
}

#my-element {
    .grid();
}

/* Yields:
*
* #my-element {
*     display: grid;
* }
*/

但我也可以在我选择的任何元素中的 html 中使用.grid，例如：

<div class="grid">...

Less 的优点是允许双重使用 mixins：像我的示例中的 mixins 也可以用于定义类。

有没有一种方法可以用Stylus相同？提前热烈感谢您的帮助！

【问题讨论】：

我想补充一点，即使我找到的解决方案（请参阅下面的答案）没问题，我仍在寻找一种方法来实现我的要求，即：有一个可以用作mixin（显然）和作为类名的mixin。使用 Less，我需要一个定义 .mydef { prop: value; }，然后我可以在另一个 css defs 中使用它（如 h1 { .mydef(); }，并作为我的 html 中的类名（如 <section class="mydef">....</section>）。Less 需要一步来实现这一目标， Stylus 需要两个。仍在寻找一种只需一步即可使用 Stylus 的方法...有可能吗？

【解决方案1】：

这是我找到的解决方案...：

/* Stylus code */
grid =
  display flex

.grid
  {grid}

/* Yields
*
* .grid {
*   display: flex;
* }
*/

现在我可以使用块 {grid} 来定义其他 css 元素的属性，并且我也可以将类 grid 与 html 元素一起使用。

我可以将属性 display: flex; 设置为我想要在我的 css 中的任何其他元素，我也可以在我的 html 中使用 grid 类（例如：<div class="grid">....。

如果您知道更好的方法（更接近我在问题中提出的问题），请告诉我！谢谢。

Ps：当然这是一个极简主义的例子，但你明白了。

【讨论】：