1

这是我第一个使用 Less 的项目，我想制作一系列具有相同总体结构但应用了不同渐变颜色的按钮。

我有我的默认按钮样式：

.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);
}

  • 您在 mixin 中调用一个变量@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中，你为颜色渐变做了一些混合。像这样的东西：

.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，它采用一种颜色并将其转换为您用于@stop、@start、@border、... 的颜色，方法是使用lighten,darken和其他颜色操作。

于 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 回答