You can use basic math operations to numerical values and colors. if we want to have two divs placed next to each other, the second one with a different background.
@div-width: 100px;
@color: #03A9F4;
div{
height: 50px;
display: inline-block;
}
#left{
width: @div-width;
background-color: @color - 100;
}
#right{
width: @div-width * 2;
background-color: @color;
}
output: -
div {
height: 50px;
display: inline-block;
}
#left {
width: 100px;
background-color: #004590;
}
#right {
width: 200px;
background-color: #03a9f4;
}
0 Comment(s)