有没有更聪明的方法用CSS/LESS写这个？

我是一个新的LESS/CSS用户，使用一些嵌套规则。到目前为止，我所做的一切都很好——我的问题是它是否写得正确，或者是否有更好的方法来处理它？也许我只是想得太多了，所以也可以随意告诉我

我试图通过在下拉列表上只指定一个强调颜色类来更改下拉列表的强调颜色（影响页眉、指示箭头和页脚），如下面的JSFIDLE所示：

我的LESS看起来像这样：

.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;
    }

}

我觉得很多选择器都太罗嗦了。如果我们只看前几个规则，我想知道是否有一种方法可以将重音“放入”下拉菜单{}规则中，这样就不会重复了。。。我觉得我几乎是在寻找一个占位符关键字或什么：

.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;
        }
    }

例如，帮助避免重复代码。下面是“下拉菜单的重音”部分的简化示例（也使用and）：

此示例需要更少的v2.x，对于早期版本，您将需要转义颜色关键字，以便它们不会转换为十六进制颜色值，即使用

.accent（~'pink'）

而不是

。重音（粉红色）等


显然，由于您对其他样式使用相同的颜色，您可能也希望将这些其他颜色相关的样式放入该混音中（我使用了
.accent
名称作为混音的简称）.
您至少可以将类似定义的样式组合在一起，如
&.blueAccent.dropdown menu>li.dropdown footer
和
&.blueAccent.dropdown menu>li.dropdown-footer>和
&.blueAccent.dropdown menu>li.dropdown-footer，&.blueAccent.dropdown menu>li.dropdown header
您应该查看代码审查：您看到了吗？mixin是一件美妙的事情：另请参见：它使您能够使用代码并应用一些修改来执行
.dropdown{.dropdown菜单{.pinkAccent&{border top:solid 5px pink；}}}}
。。结果如下：
.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;
        }
    }
}