Question

I’ve got the following CSS.less

header.section-header ul {
width: 100%;
list-style-type: none;
li {
    display: inline-block;
    padding-right: 10px;
    .bordered(0,0,0,@compcolor);
    margin-right: 10px;
    .font-size(12);
    color: @compcolor;
}
li:first-child {
    .bordered(0,0,0,0);
}
}

This is a simple horizontal list. I wish to turn the border off on the first item, but it’s not showing in FF or Chrome. The item appears but doesn’t have the specificity. Any ideas?

Edit:
The mixin is

//.bordered(COLOR, COLOR, COLOR, COLOR);

.bordered(@top-color: @bordercolor, @right-color: @bordercolor, @bottom-color:       @bordercolor, @left-color: @bordercolor) {
border-top : solid 1px @top-color;
border-left : solid 1px @left-color;
border-right : solid 1px @right-color;
border-bottom : solid 1px @bottom-color; }

Answer 1

0 is not a valid color value. Perhaps you meant transparent?

li:first-child {
    .bordered(0,0,0,transparent);
}

(You have to have a zero border width or a border style of none in order to actually disable the border, but it’s hard to make out what exactly your .bordered() function is doing.)