dotLess - 与以标签名称开头的选择器混合

发布于 2025-01-02 10:23:12 字数 656 浏览 0 评论 0原文

我正在使用 dotLess 'mixin'，如下所示：

.base-button-style
{
    ...
}

.specific-button-style
{
    .base-button-style;  //mixin
    ...
}

效果很好。但现在我需要更改基本样式的选择器，通过添加标签名称来赋予它更高的优先级：

input.base-button-style
{
    ...
}

但是，dotLess 似乎不喜欢这样，因此 .less 文件根本无法“解析”。我尝试将其更改为这样，但没有更好的结果：（

input.base-button-style
{
    ...
}

.specific-button-style
{
    input.base-button-style;
    ...
}

也就是说，在基本样式和用作 mixin 的位置都有标签名称。）

有办法让这个工作吗？

请注意，我在 HTML 中同时使用了基本按钮样式和特定按钮样式。

原文

I'm using a dotLess 'mixin' like this:

.base-button-style
{
    ...
}

.specific-button-style
{
    .base-button-style;  //mixin
    ...
}

This works fine. But now I need to change the selector of the base style to give it a higher precedence by adding the tag name:

input.base-button-style
{
    ...
}

However, dotLess doesn't seem to like this, so the .less file can't be "parsed" at all. I've tried changing it to this with no better result:

input.base-button-style
{
    ...
}

.specific-button-style
{
    input.base-button-style;
    ...
}

(That is, having the tag name in both the base style and where it is used as a mixin.)

Is there a way to make this work?

Note that I use both base-button-style and specific-button-style in my HTML.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

舂唻埖巳落 2025-01-09 10:23:12

我不确定 mixin 是否可以有选择器，因为它们是从最终代码中删除的有效函数。

最好将 .special-button-style 嵌套在 .base-button-style 下，如下所示：

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    .border-radius(.5em);
    .box-shadow(0, 1px, 2px, rgba(0,0,0,.2));
    font-weight:bold;
    font-size:15px;

    @button-color: #faa51a;
    &.edit, &.orange{
        .button-normal(@button-color);
        &:visited {.button-normal(@button-color);}
        &:hover {.button-hover(@button-color);}
        &:active {.button-active(@button-color);}
    }
}

.edit 的 &: 运算符 和 .orange 类有效地生成 .button.edit 和 .button.orange 类。因此，HTML 元素具有 class='button edit'。这适用于 IE7+ 以及所有其他常见浏览器。

I'm not sure if the mixins can have selectors, as they are effectively functions that are stripped out of the final code.

It might be better to nest your .specific-button-style under the .base-button-style like this:

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    .border-radius(.5em);
    .box-shadow(0, 1px, 2px, rgba(0,0,0,.2));
    font-weight:bold;
    font-size:15px;

    @button-color: #faa51a;
    &.edit, &.orange{
        .button-normal(@button-color);
        &:visited {.button-normal(@button-color);}
        &:hover {.button-hover(@button-color);}
        &:active {.button-active(@button-color);}
    }
}

The &: operator for the .edit and .orange classes effectively produces .button.edit and .button.orange classes. The HTML element thus has class='button edit'. That will work on IE7+, and all the usual others.

回复收藏 0 原文

~没有更多了~