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

at a minimum you could combine similarly defined styles like &.blueAccent .dropdown-menu > li.dropdown-footer and &.blueAccent .dropdown-menu > li.dropdown-header as &.blueAccent .dropdown-menu > li.dropdown-footer, &.blueAccent .dropdown-menu > li.dropdown-header — charles
– charles, Commented Oct 23, 2014 at 18:24
You should check out code review: codereview.stackexchange.com — Michael
– Michael, Commented Oct 23, 2014 at 18:37
Have you seen this? Mixins are a beautiful thing: lesscss.org/features/#detached-rulesets-feature — Josh Burgess
– Josh Burgess, Commented Oct 23, 2014 at 18:57
see also: stackoverflow.com/questions/26505932/… which enables you to do .dropdown {.dropdownmenu{ .pinkAccent& { border-top: solid 5px pink; }}} — Bass Jobsen
– Bass Jobsen, Commented Oct 23, 2014 at 22:10
Using your code and applying some modifications.. and the result is here: codepen.io/madcorp/pen/vCLxB — madcorp
– madcorp, Commented Oct 24, 2014 at 0:23

seven-phases-max · Accepted Answer · 2014-10-24 11:49:44Z

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).

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related