0

LESS でのフォント ルールの管理を簡単にしたかったので、LESS 公式ガイドのネストされたルールのセクションに基づいて次のルールを作成しました。

ただし、これらは追加のクラスを含むネストされたルールの例を提供するだけなので、この方法で書くことが有効かどうかを知りたいと思っていました。そうでない場合、コードを簡潔にしてネストされたルールを利用する方法はありますか?

ネストされたルール機能を使用して、.logo クラスの h1 と h3 のパラメーターを指定できるようにしたいと考えています。

//Fonts
.font-setup (@fontfamily, @fontsize, @fontweight, @fontcolor){
    font-family: @fontfamily;
    font-size: @fontsize;
    font-weight: @fontweight;
    color: @fontcolor;
}

.logo {
    h1 {.font-setup ("Euphemia UCAS", 200px, normal, #222);}
    h3 {.font-setup ("Euphemia UCAS", 40px, normal, #222);}

    text-shadow: 0px 2px 3px #555;
}

注： Bootstrap.lessの上に構築しているため、クラスがcssをオーバーライドしていることを指摘する必要があります。私が言うように、ネストされたルールを使用せずにこれをlessで出力した場合、問題はありませんでした

4

1 に答える 1

1

試してみてください。

しかし、はい、これは有効です。

明確にするために、less ファイルの 1 つの末尾に次のコードを追加してテストしました。

        .font-setup (@fontfamily, @fontsize, @fontweight, @fontcolor){
        font-family: @fontfamily;
        font-size: @fontsize;
        font-weight: @fontweight;
        color: @fontcolor;
        }

.logo {
    h1 {.font-setup ("Euphemia UCAS", 200px, normal, #222);}
    h3 {.font-setup ("Euphemia UCAS", 40px, normal, #222);}

    text-shadow: 0px 2px 3px #555;
}

これにより、CSS の最後に次のように表示されます。

.logo {
  text-shadow: 0px 2px 3px #555;
}
.logo h1 {
  font-family: "Euphemia UCAS";
  font-size: 200px;
  font-weight: normal;
  color: #222222;
}
.logo h3 {
  font-family: "Euphemia UCAS";
  font-size: 40px;
  font-weight: normal;
  color: #222222;
}

これは DotLess を使用していますが、すべてのセムである必要があると思います。

ファイルの他の部分を確認する必要があると思います...

于 2012-07-24T11:01:43.800 に答える