Can my Less CSS code be improved?

Question

I just started getting into the Less CSS framework and I am wondering if I'm doing it right and how the code can be improved if possible.

global.less

//variables
@themeRed: #cc1111;
@themeColor: @themeRed;
@marginBottom: 10px;
@contentRadius: 5px;

//mixins
.border-radius(@args) {
  -webkit-border-radius: @args; 
  -moz-border-radius: @args; 
  border-radius: @args; 
}

//styles
body {
    font: 12px Arial;
    color: #333;
    background: #e9eaed;
}

a {
    &:link, &:visited {
        color: @themeColor;
        text-decoration: none;
    }
    &:hover {
        border-bottom: solid 1px;
    }
    &:active {
        //color: lighten(@themeColor, 10%);
    }
}

#topbar {
    background: @themeColor;
    width: 100%;
    height: 2px;
}

#container {
    width: 750px;
    margin: 0 auto;
    padding: 10px 0;
}

#header {
    display: table;
    height: 100px;
    width: 100%;
    margin-bottom: @marginBottom;
    .wrapper {
        vertical-align: middle;
        display: table-cell;
        text-align: center;
    }
}

#sitename {
    font-size: 50px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 2px @themeColor;
    a {
        color: #fff;
        border: none;
        text-decoration: none;
    }
}

.section-heading {
    font-size: 1.1em;
    padding-left: 10px;
    margin-bottom: @marginBottom;
    text-transform: uppercase;
    font-weight: bold;
    color: @themeColor;
    border-bottom: 1px solid #e5e5e5;
    line-height: 29px;
}

p {
    line-height: 1.5em;
    margin-bottom: 1em;
}

.last {
    margin-bottom: 0;
}

#nav {
    position: absolute;
    width: 90px;
    text-align: right;
    margin-top: @contentRadius;
    li {
        border-right: 2px solid lighten(@themeColor, 30%);
        padding: 2px 5px 2px 0;
        margin-bottom: 2px;
        &:hover {
            border-color: @themeColor;
        }
        &.active {
            border-color: @themeColor;
            font-weight: bold;
        }
    }
}

.content {
    width: 518px;
    padding: 15px;
    margin: 0 auto;
    margin-bottom: @marginBottom;
    background: #fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-bottom: solid 2px @themeColor;
   .border-radius(@contentRadius);
    box-shadow: 0 1px 5px #d1d1d1;
    a {
        border-bottom: 0;
        &:hover {
            text-decoration: underline;
        }
    }
}

#advertisement {
    margin-bottom: @marginBottom;
    .adsbygoogle {
        display: block;
        margin: 0 auto;
    }
}

#footer {
    text-align: center;
    p {
        margin-bottom: 0;
    }
}

Answer 1

Looks just fine, I think. Only some really minor things come to mind

1. For font-family, it's good to always end with a generic font face style; in this case it'd be sans-serif. Arial is of course as "web-safe" as it gets, but still.

2. Why does #nav have a position: absolute rule, but no actual positioning (left, top, etc.) values? I imagine you're doing some JS positioning, but you should still have a fallback position (or just set position: absolute in the JS, so it's only there when needed).

3. You could consider using :last-of-type instead of explicitly giving elements a last class. Depends on what browsers you're targeting

4. Remove the a:active rule; you've already commented it out of the code.

5. You may want to do a box-shadow function that does the vendor-prefix magic, similar to your border-radius

6. You have one @themeColor, but also a bunch of different hard-coded colors (e.g. border colors on .content). So while it's easy to change the @themeColor, you'll probably still have to go through and change every other color to better match the new theme. If you can, use the color functions to derive the rest of the palette from @themeColor or make a more comprehensive list of color variables (even if they're only used once, it's still nice to be able to define the whole color scheme in 1 place).