Question

我是一个使用一些嵌套规则的新LESS / CSS用户。我到目前为止工作得很好 - 我的问题是它是否写得正确，或者是否有更好的方法来处理它？也许我只是过度思考这个，所以请随时告诉我。

我试图通过在下拉列表中仅指定一个强调颜色类来更改下拉列表的强调颜色（影响标题，指示箭头和页脚） - 如此jsfiddle所示： http://jsfiddle.net/tq5gjbw9/

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

}

我觉得很多选择器都过分冗长。如果我们看一下前几条规则，我想知道是否有办法将重音“加入”＆amp; .dropdown-menu {}规则所以它不会重复...我觉得我几乎都在寻找一个占位符关键字或其他东西：

.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

Mixins之类的内容有助于避免重复代码。以下是“下拉菜单重音”部分的简化示例（也使用Selector Interpolation和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;
        }
    }
}

此示例需要Less v2.x，对于早期版本，您需要转义颜色关键字，以便它们不会转换为十六进制颜色值，即使用.accent(~'pink');而不是.accent(pink);等。< / p>

显然，因为你对其他款式使用相同的颜色，你可能也想把这些其他颜色依赖的样式放入mixin中（我简单地使用.accent名称作为mixin）。

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

1 个答案: