Question

我是新人，少了。我从现有的CSS创建了一个较少的文件。我设法使用mixins来管理渐变，但它根本没有优化。我认为有一个问题，因为我创建了许多渐变功能（我做了很多复制/粘贴......它不是一个好兆头），也许它不是最好的做法。我想我可以用更多参数做得更好。你能告诉我这是否正确或者我是否完全错了：

/* 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;
}

Answer 1

您只能使用2个mixins，其中包含一些参数：

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

Answer 2

如果你愿意，你可以重复使用复制的东西（但一般情况下，如果你自己复制粘贴就可以了，就像你做的那样），例如类似的东西（确切的mixins参数，它们的计数和默认值可能会有所不同）：

@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.

多个参数或多个功能

2 个答案: