1

これは私が使用した最初のプロジェクトです。次に、同じ一般的な構造を持ち、異なるグラデーション カラーが適用された一連のボタンを作成したいと考えています。

私はデフォルトのボタンスタイルを持っています:

.button-regular (@origin: top, @start: #d2d2d2, @middle: #7a7a7a, @stop: #4d4d4d, @fallback: #3f4c6b, @border: #3c3c3c;) {
  border-radius: 3px; color: @white; font-size: 13px; line-height: 18px; height: 36px; font-weight: normal; padding: 8px 15px 8px 15px; text-align: center;
  background: @fallback;
  background: -moz-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(6%, @middle), color-stop(100%, @stop));
  background: -webkit-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -o-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -ms-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @middle 6%, @stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid @border;
}

以下のようなものを使用して、ボタンの新しいインスタンスごとに色を上書きしたいと思います。

input.lightBlue {
  .button-regular(top, #bfeef8, #40cdeb, #00bce4, #3f4c6b, #00b0d5;);
}

しかし、ボタンを作成すると:

<input class="lightBlue" type="submit" value="Search">

元の (灰色の) 色がまだ表示されます。この新しいボタン インスタンスで新しい色を使用して色が上書きされない理由はありますか?

それが違いを生む場合、ブラウザ内でコンパイルするためにless.jsを使用しています。

4

2 に答える 2

6

そこにあるものは問題なく動作するはずです。必要なのは

タイプミスを修正:

  • クラス定義にセミコロン ( ;) (最後の色の後ろ) が多すぎます

    input.lightBlue {
  .button-regular (top, #bfeef8, #40cdeb, #00bce4, #3f4c6b, #00b0d5);
}

  • ミックスインで変数を呼び出します。@white事前に変数を定義するか、white代わりに書き込む必要があります。

いくつかの追加の提案:

(説明のためにいくつかのランダムな設定を使用しました)。あなたはこのようなことをすることができます

<input class="button default" type="submit" value="Search">
<input class="button green" type="submit" value="Search">
<input class="button red" type="submit" value="Search">

button一般的なボタンの外観を定義するクラスがあります。わからない、多分このようなもの：

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:active {
    position: relative;
    top: 1px;
}

LESSでは、色のグラデーション用にいくつかの mixin を作成します。このようなもの：

.gradient-mixin (@origin, @start, @middle, @stop, @fallback, @border) {
  background: @fallback;
  background: -moz-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(6%, @middle), color-stop(100%, @stop));
  background: -webkit-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -o-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -ms-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @middle 6%, @stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid @border;
}

.button-make (@name:"default", @origin: top, @start: #d2d2d2, @middle: #7a7a7a, @stop: #4d4d4d, @fallback: #3f4c6b, @border: #3c3c3c;) {
  @classname: ~"@{name}";
  .@{classname} {
    .gradient-mixin (@origin, @start, @middle, @stop, @fallback, @border);
    &:hover {
    .gradient-mixin(@origin, lighten(@start,10%), lighten(@middle,10%), lighten(@stop,10%), lighten(@fallback,10%), @border);
    }
    &:active {
    .gradient-mixin (@origin, darken(@start,10%), darken(@middle,10%), darken(@stop,10%), darken(@fallback,10%), @border);
    }
  }
}

次に、各色に対してそれらを呼び出します...これにより、ボタンの各色のクラスが構築されます。

.button-make;
.button-make ("green", top, #7db72f, #87d918, #4e7d0e, #7db72f, #538312);
.button-make ("red", top, #ed1c24, #e93a3f, #aa1317, #ed1c24, #980c10);

出力のjsfiddle の例を次に示します。

ただし、グラデーション内のすべての色を手動で定義する代わりに、LESS でより一般的な mixin を作成することもできます。これは、1 つの色を取り、、、およびその他の色操作を使用し@stopて@start、、、、@border... に使用する色に変換します。lightendarken

于 2013-05-02T15:56:14.983 に答える
2

これについて私が理解しているのは、これらのボタンで CSS を上書きしたいということです。あなたがしなければならないのはdivs、あなたのボタンやあなたがやろうとしていることのために作成することだけです. ここで例を示します。

HTML

<input class="lightblue" type="submit" value="Search" style="/*style goes here*/">

CSS:

.lightblue {
border-radius: 3px; color: @white; font-size: 13px; line-height: 18px; height: 36px; font-weight: normal; padding: 8px 15px 8px 15px; text-align: center;
  background: @fallback;
  background: -moz-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(6%, @middle), color-stop(100%, @stop));
  background: -webkit-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -o-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -ms-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @middle 6%, @stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid @border;
}

つまり、ボタンのスタイルだけが必要だということです。これをオーバーライドしたい場合は、私が示した HTML にスタイルを入れてください。これがお役に立てば幸いです。

于 2013-05-02T14:05:02.417 に答える