使用Less CSS制作多个渐变

Question

这是我使用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在浏览器中编译,如果这有任何区别.

Answer 1

你有什么应该工作正常,你只需要

修正错字:

• ;在类定义中有一个分号()(在最后一种颜色之后)太多了

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

• 你需要@white在mixin中调用一个变量,你需要确保事先定义它,否则只需写入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类来定义一般按钮外观.Dunno,也许是这样的:

.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示例.

但是,而不是手工定义渐变的所有颜色,您还可以在更短的更一般的混入,这需要一个颜色,将其转变为您使用的颜色@stop,@start,@border用,... lighten,darken和其他颜色的操作.