手写笔混合作为类名

问题描述

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

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

#my-element {
    .grid();
}

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

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

<div class="grid">...

Less 的优点是允许双重使用 mixin：像我的例子中的 mixin 也可以用来定义类。

是否有一种方法可以用 Stylus同样来做相同的？我预先感谢您的帮助！

解决方法

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

/* Stylus code */
grid =
  display flex

.grid
  {grid}

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

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

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

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

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