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 で base-button-style と specific-button-style の両方を使用していることに注意してください。

4

1 に答える 1

2

ミックスインがセレクターを持つことができるかどうかはわかりません。それらは最終的なコードから実質的に取り除かれた関数であるためです。

次のように.specific-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);}
    }
}

and クラスの &: 演算子は、実質的に.editandクラスを生成します。したがって、HTML 要素には. これは IE7+ および通常の他のすべてで動作します。.orange.button.edit.button.orangeclass='button edit'

于 2012-02-02T15:52:54.173 に答える