Is there a smarter way to write this using CSS/LESS?

Question

I'm a new LESS/CSS user working with some nested rules. What I have so far is working just fine - my question is whether it's written correctly, or if there's a better way to approach it? Perhaps I'm just over-thinking this so feel free to tell me that too.

I am attempting to change the accent color of a dropdown (affecting the header, a indicator arrow, and the footer) by specifying only an accent color class on the dropdown - as illustrated by this jsfiddle: http://jsfiddle.net/tq5gjbw9/

My LESS looks like this:

.dropdown {

    & .dropdown-menu
    {
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-size: 1.3rem;
        border-radius: 0;
        border-left: 1px solid rgba(0,0,0,0.25);
        border-right: 1px solid rgba(0,0,0,0.25);
        border-top: solid 5px @color_grey;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        box-shadow:4px 4px 0 rgba(100,100,100,0.08);
    }
    &.pinkAccent .dropdown-menu
    {
        border-top: solid 5px @color_pink;
    }
    &.greenAccent .dropdown-menu
    {
        border-top: solid 5px @color_green;
    }
    &.blueAccent .dropdown-menu
    {
        border-top: solid 5px @color_blue;
    }

    & .dropdown-toggle {
        position:relative;
    }

    &.open .dropdown-toggle:after
    {
        content: " ";
        background-color: transparent;
        height: 0;
        width: 0;
        position: absolute;
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        margin: 0 0 0 -5px;
        padding: 0;
        pointer-events: none;
        border-top: 0;
        border-bottom: 6px solid @color_grey; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }
    &.open.pinkAccent .dropdown-toggle:after
    {
        border-bottom-color: @color_pink;
    }
    &.open.greenAccent .dropdown-toggle:after
    {
        border-bottom-color: @color_green;
    }
    &.open.blueAccent .dropdown-toggle:after
    {
        border-bottom-color: @color_blue;
    }

    & .dropdown-menu > li > a {
        -moz-transition: all 0;
        -o-transition: all 0;
        -webkit-transition: all 0;
        transition: all 0;
        outline: 0;
        &:hover,
        &:focus
        {
            background-color: #e8e8e8;
            background-image: none;
            filter: none;
        }

    }

    & .dropdown-menu > li.dropdown-header {
        background-color: @color_grey;
        color: @color_white;
        margin:0;
        padding: 5px;
    }
    &.pinkAccent .dropdown-menu > li.dropdown-header {
        background-color: @color_pink;
        color: @color_white;
    }
    &.greenAccent .dropdown-menu > li.dropdown-header {
        background-color: @color_green;
        color: @color_white;
    }
    &.blueAccent .dropdown-menu > li.dropdown-header {
        background-color: @color_blue;
        color: @color_white;
    }

    & .dropdown-menu > li.dropdown-footer {
        background-color: @color_grey;
        color: @color_white;
        margin:0;
        padding: 5px;
    }
    &.pinkAccent .dropdown-menu > li.dropdown-footer {
        background-color: @color_pink;
        color: @color_white;
    }
    &.greenAccent .dropdown-menu > li.dropdown-footer {
        background-color: @color_green;
        color: @color_white;
    }
    &.blueAccent .dropdown-menu > li.dropdown-footer {
        background-color: @color_blue;
        color: @color_white;
    }

}

I feel like a lot of the selectors are overly wordy. If we look at the just the first few rules, I'm wondering if there's a way to put the accents "into" the & .dropdown-menu {} rule so it's not repeated... I feel like I'm almost looking for a placeholder keyword or something:

.dropdown {

    &[placeholder] .dropdown-menu
    {
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-size: 1.3rem;
        border-radius: 0;
        border-left: 1px solid rgba(0,0,0,0.25);
        border-right: 1px solid rgba(0,0,0,0.25);
        border-top: solid 5px @color_grey;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        box-shadow:4px 4px 0 rgba(100,100,100,0.08);

        [placeholder=".pinkAccent"] 
        {
            border-top: solid 5px @color_pink;
        }
        [placeholder=".greenAccent "] 
        {
            border-top: solid 5px @color_green;
        }
        [placeholder=".blueAccent"] 
        {
            border-top: solid 5px @color_blue;
        }
    }

Answer 1

Things like Mixins help to avoid repetitive code. Here's a simplified example for "accents of the drop-down menu" part (also using Selector Interpolation and Variable Name Referencing):

.dropdown {
    // use accent mixin:
    .accent(pink);
    .accent(green);
    .accent(blue);

    // define accent mixin:
    .accent(@name) {
        @color: "color_@{name}";
        &.@{name}Accent .dropdown-menu {
            border-top: solid 5px @@color;
        }
    }
}

This example requires Less v2.x, for earlier versions you will need escaped color keywords so that they won't be converted to hex color values, i.e. use .accent(~'pink'); instead of .accent(pink); etc.

---

Obviously since you use same colors for other styles you probably would want to put these other color depended styles into that mixin too (I used .accent name for the mixin just for short).