使用较少的darkem / lighten来获取基色并为其添加10种暗度/亮度。
减少代码
@baseColour: #B61840;
@baseColour_d9: darken(@baseColour,90%);
@baseColour_d8: darken(@baseColour,80%);
@baseColour_d7: darken(@baseColour,70%);
@baseColour_d6: darken(@baseColour,60%);
@baseColour_d5: darken(@baseColour,50%);
@baseColour_d4: darken(@baseColour,40%);
@baseColour_d3: darken(@baseColour,30%);
@baseColour_d2: darken(@baseColour,20%);
@baseColour_d1: darken(@baseColour,10%);
@baseColour_l1: lighten(@baseColour,10%);
@baseColour_l2: lighten(@baseColour,20%);
@baseColour_l3: lighten(@baseColour,30%);
@baseColour_l4: lighten(@baseColour,40%);
@baseColour_l5: lighten(@baseColour,50%);
@baseColour_l6: lighten(@baseColour,60%);
@baseColour_l7: lighten(@baseColour,70%);
@baseColour_l8: lighten(@baseColour,80%);
@baseColour_l9: lighten(@baseColour,90%);
@baseColour_l95: lighten(@baseColour,95%);
@baseColour_l975: lighten(@baseColour,97.5%);
.baseColour_d9{background-color:@baseColour_d9; width:132px;height:32px;}
.baseColour_d8{background-color:@baseColour_d8; width:132px;height:32px;}
.baseColour_d7{background-color:@baseColour_d7; width:132px;height:32px;}
.baseColour_d6{background-color:@baseColour_d6; width:132px;height:32px;}
.baseColour_d5{background-color:@baseColour_d5; width:132px;height:32px;}
.baseColour_d4{background-color:@baseColour_d4; width:132px;height:32px;}
.baseColour_d3{background-color:@baseColour_d3; width:132px;height:32px;}
.baseColour_d2{background-color:@baseColour_d2; width:132px;height:32px;}
.baseColour_d1{background-color:@baseColour_d1; width:132px;height:32px;}
.baseColour{background-color:@baseColour; width:132px;height:32px;}
.baseColour_l1{background-color:@baseColour_l1; width:132px;height:32px;}
.baseColour_l2{background-color:@baseColour_l2; width:132px;height:32px;}
.baseColour_l3{background-color:@baseColour_l3; width:132px;height:32px;}
.baseColour_l4{background-color:@baseColour_l4; width:132px;height:32px;}
.baseColour_l5{background-color:@baseColour_l5; width:132px;height:32px;}
.baseColour_l6{background-color:@baseColour_l6; width:132px;height:32px;}
.baseColour_l7{background-color:@baseColour_l7; width:132px;height:32px;}
.baseColour_l8{background-color:@baseColour_l8; width:132px;height:32px;}
.baseColour_l9{background-color:@baseColour_l9; width:132px;height:32px;}
.baseColour_l95{background-color:@baseColour_l95;width:132px;height:32px;}
.baseColour_l975{background-color:@baseColour_l975;width:132px;height:32px;}
HTML code:
<div class='baseColour_d9'>baseColour_d9</div>
<div class='baseColour_d8'>baseColour_d8</div>
<div class='baseColour_d7'>baseColour_d7</div>
<div class='baseColour_d6'>baseColour_d6</div>
<div class='baseColour_d5'>baseColour_d5</div>
<div class='baseColour_d4'>baseColour_d4</div>
<div class='baseColour_d3'>baseColour_d3</div>
<div class='baseColour_d2'>baseColour_d2</div>
<div class='baseColour_d1'>baseColour_d1</div>
<div class='baseColour'>baseColour</div>
<div class='baseColour_l1'>baseColour_l1</div>
<div class='baseColour_l2'>baseColour_l2</div>
<div class='baseColour_l3'>baseColour_l3</div>
<div class='baseColour_l4'>baseColour_l4</div>
<div class='baseColour_l5'>baseColour_l5</div>
<div class='baseColour_l6'>baseColour_l6</div>
<div class='baseColour_l7'>baseColour_l7</div>
<div class='baseColour_l8'>baseColour_l8</div>
<div class='baseColour_l9'>baseColour_l9</div>
<div class='baseColour_l95'>baseColour_l95</div>
<div class='baseColour_l975'>baseColour_l975</div>
结果:
我的问题: 为什么d4和d之间存在这种非线性下降? d5以及l5&amp; L6?
答案 0 :(得分:0)
我从来没有弄清楚它为什么会起作用,但这是我正在寻找的效果:
@baseColour: #B61840;
@baseColour_d9: multiply(@baseColour,#191919);
@baseColour_d8: multiply(@baseColour,#323232);
@baseColour_d7: multiply(@baseColour,#4B4B4B);
@baseColour_d6: multiply(@baseColour,#646464);
@baseColour_d5: multiply(@baseColour,#7D7D7D);
@baseColour_d4: multiply(@baseColour,#969696);
@baseColour_d3: multiply(@baseColour,#AFAFAF);
@baseColour_d2: multiply(@baseColour,#C8C8C8);
@baseColour_d1: multiply(@baseColour,#E1E1E1);
@baseColour_l1: screen(@baseColour,#191919);
@baseColour_l2: screen(@baseColour,#323232);
@baseColour_l3: screen(@baseColour,#4B4B4B);
@baseColour_l4: screen(@baseColour,#646464);
@baseColour_l5: screen(@baseColour,#7D7D7D);
@baseColour_l6: screen(@baseColour,#969696);
@baseColour_l7: screen(@baseColour,#AFAFAF);
@baseColour_l8: screen(@baseColour,#C8C8C8);
@baseColour_l9: screen(@baseColour,#E1E1E1);
@baseColour_l95: screen(@baseColour,#E6E6E6);
@baseColour_l975: screen(@baseColour,#EBEBEB);