-2
\$\begingroup\$

I have the following snippet of LESS code to generate CSS. I have some different classes which I apply to different elements, and on hover or focus they should change color.

.social-icons {
  color:#bbbbbb;
  // Material design palette, 500

  .blue {
    &:hover, &:focus {
      color: #2196F3;
    }
  }
  .red {
    &:hover, &:focus {
      color: #F44336;
    }
  }
  .green {
    &:hover, &:focus {
      color: #4CAF50;
    }
  }
  .teal {
    &:hover, &:focus {
      color: #009688;
    }
  }
  .purple {
    &:hover, &:focus {
      color: #9C27B0;
    }
  }
  .lime {
    &:hover, &:focus {
      color: #CDDC39;
    }
  }
  .orange {
    &:hover, &:focus {
      color: #FF9800;
    }
  }

}

It produces the following CSS, which is good:

.social-icons {
  color: #bbbbbb;
}
.social-icons .blue:hover,
.social-icons .blue:focus {
  color: #2196F3;
}
.social-icons .red:hover,
.social-icons .red:focus {
  color: #F44336;
}
.social-icons .green:hover,
.social-icons .green:focus {
  color: #4CAF50;
}
.social-icons .teal:hover,
.social-icons .teal:focus {
  color: #009688;
}
.social-icons .purple:hover,
.social-icons .purple:focus {
  color: #9C27B0;
}
.social-icons .lime:hover,
.social-icons .lime:focus {
  color: #CDDC39;
}
.social-icons .orange:hover,
.social-icons .orange:focus {
  color: #FF9800;
}

I'm new to LESS, so I was wondering; Is there a way to make it even a shorter block of code in LESS? I feel like that &:hover, &:focus {} is used more than it needs to be. I tried nesting all .color classes in :hover,:focus and using & to refer to them, but it didn't work as I expected.

\$\endgroup\$
3
  • 1
    \$\begingroup\$ Did you look through the LESS documentation? There is at least 1 language construct that's specifically for reusing blocks of code. When the documentation is a single page long like it is for LESS or Sass, I'm a lot less forgiving about not being able to find features that are clearly documented. \$\endgroup\$
    – cimmanon
    Apr 20 '15 at 19:18
  • \$\begingroup\$ Sorry about disappointing you, but do you mean the &-variable? I have not found a way yet to use this properly, as it doesn't produce the right results for me. \$\endgroup\$ Apr 21 '15 at 14:45
  • \$\begingroup\$ Ah, perhaps you meant using functions. I did not know I could use functions within the definition of a selector. Maybe that isn't even required. I will look into using them. Thanks for sending me in the right direction, although I find the documentation not really fully documented. But that's my opinion, as I'm new to this, I should be better off with following a tutorial. \$\endgroup\$ Apr 21 '15 at 14:51
2
\$\begingroup\$

You can use a mixin. In less you can mixin properties from class and ID selectors. A class selector with parentheses after it (.mixin()) will be called a mixin. Mixins themselves do not generate output in the compiled CSS. Mixins can be parameterized.

For you example:

.states(@color) {
&:hover, &:focus {
      color: @color;
    }
}

Now you can use:

.social-icons { color:#bbbbbb; // Material design palette, 500

.blue { .states(#2196F3); } }

The above compiles into CSS as follows:

.social-icons {
  color: #bbbbbb;
}
.social-icons .blue:hover,
.social-icons .blue:focus {
  color: #2196f3;
}

Alternatively you could create less code which defines a list of key value pairs and use a mixin guard to create a loop which sets your classes and states.

also see: https://stackoverflow.com/questions/23658087/loop-over-an-array-of-name-value-pairs-in-less/26445367#26445367

@colors: blue #2196F3, red #F44336, green #4CAF50, teal #009688, purple  #9C27B0,  lime #CDDC39, orange #FF9800;

.states(@iterator:1) when(@iterator <= length(@colors)) {
    @class: extract(extract(@colors, @iterator),1);
    .@{class} {
        &:hover, &:focus {
          color: extract(extract(@colors, @iterator),2);
        }
    }
   .states((@iterator + 1));
}


.social-icons {
  color:#bbbbbb;
  // Material design palette, 500
  .states();
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.