多個參數或多個功能

Question

我是新的少用。我從現有的css創建了一個較少的文件。我設法做mixin來管理漸變，但它並沒有被優化。 我認爲有一個問題，因爲我創建了許多漸變功能（我做了很多複製/粘貼...這不是一個好兆頭），也許這不是最好的做法。 我想我可以用更多的參數做得更好。 你能告訴我，如果這是正確的，或者如果我沒有完全地錯了：

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

如果你想要的話，你可以重複使用重複的東西（但是一般來說，如果你自己複製粘貼的話，你可以這樣做）。像（確切混入的論點，他們的數量和它們的默認值可能會有所不同）：

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

Answer 2

你可以只使用2混入，有幾個參數：

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