Css 多参数或多功能

我是新来的，没有那么多。我从现有的css创建了一个更少的文件。我设法做混音来管理梯度，但它根本没有优化。 我认为这是一个问题，因为我创建了很多梯度函数（我做了很多复制/粘贴…这不是一个好迹象），也许这不是最佳实践。 我想我可以用更多的参数做得更好。 你能告诉我这是正确的还是我完全错了吗

/* User UI parameters */
@main-color: #224457; // default blue #324457
@secondary-color: #ececec; // default grey ececec
@gradient-strong: 10%;

@images-rep:'/public/system/assets/img/';

/* Gradient functions */
.gradient (@orientation:to bottom) {
    background: linear-gradient(@orientation, @main-color 0%,lighten(@main-color, @gradient-strong) 100%);
}

.gradient-image (@image-url:'') {
    background: url("@{images-rep}@{image-url}") no-repeat 20px, linear-gradient(to bottom, @main-color 0%,lighten(@main-color, @gradient-strong) 100%);
}

.gradient-image-right (@image-url:'') {
    background: url("@{images-rep}@{image-url}") no-repeat right 20px, linear-gradient(to bottom, @secondary-color 0%,lighten(@secondary-color, @gradient-strong) 100%);
}

.gradient-image-menu (@image-url:'') {
    background: url("@{images-rep}@{image-url}") no-repeat 0 -0, linear-gradient(to bottom, @main-color 0%,lighten(@main-color, @gradient-strong) 100%);
}

/* exemple of classes using gradient */
.icon-car {
    .gradient-image('caricon.png');
}

.icon-myaccount {
    .gradient-image('myaccount-icon.png');
}

.bgdropdown {
    .gradient();
    border: 0;
    padding: 10px;
    width: 100%;
    text-align: left;
}

.linkmycars {
    .gradient-image-right('sub.png');
    padding: 12px;
    margin-bottom: 10px;
    color: #616161;
    font-size: 18px;
    font-family: tahoma;
    display: inline-block;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #d5d5d5;
}

.addcars {
    .gradient-image-right('add.png');
    padding: 12px;
    margin-bottom: 10px;
    color: #616161;
    font-size: 18px;
    font-family: tahoma;
    display: inline-block;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #d5d5d5;
}

---

您只能使用2个mixin，并带有几个参数：

• .gradient（@orientation，@color）

• .gradient image（@image url、@position-x、@position-y、@orientation、@color）

以下是完整的代码：

/* User UI parameters */
@main-color: #224457; // default blue #324457
@secondary-color: #ececec; // default grey ececec
@gradient-strong: 10%;

@images-rep:'/public/system/assets/img/';

/* Gradient functions */
.gradient (@orientation:to bottom, @color:@main-color) {
    background: linear-gradient(@orientation, @color 0%,lighten(@color, @gradient-strong) 100%);
}

.gradient-image (@image-url:'', @position-x:center, @position-y:center, @orientation:to bottom, @color:@main-color) {
    background: url("@{images-rep}@{image-url}") no-repeat @position-x @position-y, linear-gradient(@orientation, @color 0%,lighten(@color, @gradient-strong) 100%);
}

/* exemple of classes using gradient */
.icon-car {
    .gradient-image('caricon.png', 20px);
}

.icon-myaccount {
    .gradient-image('myaccount-icon.png', 20px);
}

.bgdropdown {
    .gradient();
    border: 0;
    padding: 10px;
    width: 100%;
    text-align: left;
}

.linkmycars,
.addcars {
    padding: 12px;
    margin-bottom: 10px;
    color: #616161;
    font-size: 18px;
    font-family: tahoma;
    display: inline-block;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #d5d5d5;
}

.linkmycars {
    .gradient-image('sub.png', right, 20px, to bottom, @secondary-color);
}

.addcars {
    .gradient-image('add.png', right, 20px, to bottom, @secondary-color);
}

---

如果您愿意，您可以重复使用复制内容（但一般来说，如果您自己对复制粘贴没问题，那么您可以使用这种方式），例如（确切的mixin参数、它们的计数和默认值可能会有所不同）：

这看起来很棒（我不知道这可以这样做），但“后台+：”似乎不是用“simple less”SimpLess编译的，它已经非常过时了（它使用了~2年前的版本减去1.3.x）。要求低于1.5或更高。

@main-color:      #224457; // default blue #324457
@secondary-color: #ececec; // default grey ececec
@gradient-strong: 10%;

@images-rep:'/public/system/assets/img/';

// ...

.gradient(@color: @main-color, @orientation: to bottom, @lighten: @gradient-strong) {
    background+: linear-gradient(@orientation, @color 0%, lighten(@color, @lighten) 100%);
}

.background-image(@image, @image-parameters...) {
    background+: url("@{images-rep}@{image}") no-repeat @image-parameters;
}

.gradient-image(@image) {
    .background-image(@image, 20px);
    .gradient();
}

.gradient-image-right(@image) {
    .background-image(@image, right 20px);
    .gradient(@secondary-color);
}

.gradient-image-menu(@image) {
    .background-image(@image, 0 0);
    .gradient();
}

// etc.

// usage:

.icon-car {
    .gradient-image('caricon.png');
}

.linkmycars {
    .gradient-image-right('sub.png');
}

.addcars {
    .gradient-image-menu('add.png');
}

// etc.