LESS formatting

Question

I have been writing some LESS CSS code recently, and was wondering what the best way for format this would be.

Ideally i don't want to reproduce the button classes, and separate them from the input tags, unless that's the best way to go.

.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: 38px; padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; &:hover, &:focus { color: #333; border-color: #888; outline: 0; } &.button-primary { color: #FFF; background-color: #33C3F0; border-color: #33C3F0; &:hover, &:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; } } }

I did initially think about doing them like this

.button, button, input { &:[type="submit"], &:[type="reset"], &:[type="button"] {}

However doing them like this would mean the button class would also have a type.

Any help would be much appreciated, thanks.

@Marwelln nice one, that looks like it could work well. Thanks for your quick reply. — thatuxguy
– thatuxguy, Commented Jan 26, 2015 at 9:17
@Marwelln looks to be working, can you post so i can mark as the answer? Not sure why people vote to close this cause this could help someone else. — thatuxguy
– thatuxguy, Commented Jan 26, 2015 at 9:27

Marwelln · Accepted Answer · 2015-01-26 11:11:45Z

1

You can solve this by using the extend function in LESS.

button, .button { // styles } input { &[type="submit"], &[type="reset"], &[type="button"] { // All styles from .button will also be available here. &:extend(.button); } }

edited Jan 26, 2015 at 11:11

answered Jan 26, 2015 at 11:02

Marwelln

29.5k21 gold badges97 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pawel Over a year ago

It will add the input selectors to button, .button, but will not generate input:hover, input.button-primary etc. You need &:extend(.button all); to extend the nested selectors as well.

Marwelln Over a year ago

I have never used extend before so my code was just guess from a quick read at the documentation. Feel free to edit my post if you'd like @pawel.

thatuxguy Over a year ago

Cheers guys, really helpful and has worked a treat. I looked at the link and it mentioned "all" as @pawel mentions. Thanks again

Collectives™ on Stack Overflow

LESS formatting

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related