Mixing in Less CSS

Question

I'm still new at using Less CSS and I couldn't find a solution to my problem. I want a more efficient output result.

I have this code in less :

.btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;

      &.btn-default {
        color: @trans-default;
        &:hover {
          color: @trans-hover-color;
        }
      }

      &.btn-primary {
        color: @trans-primary;
        &:hover {
          color: @trans-hover-color;
        }
     }
  }

And this is the css output :

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;
}

.btn-trans.btn-default {
  color: #bdbdbd;
}

.btn-trans.btn-default:hover {
  color: #f5f5f5;
}

.btn-trans.btn-primary {
  color: #738ffe;
}

.btn-trans.btn-primary:hover {
  color: #f5f5f5;
}

But the result I'm looking for is this :

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;
}

.btn-trans.btn-default {
  color: #bdbdbd;
}

.btn-trans.btn-primary {
  color: #738ffe;
}

.btn-trans.btn-default:hover,
.btn-trans.btn-primary:hover {
  color: #f5f5f5;
}

With the hover classes nested since the color is the same.

I've succeeded getting the desired result by adding `&.btn-default, .btn-primary {&:hover {color: @trans-hover-color;}}`, if there's a better way to do it, please let me know. — LuTz, Apr 21 '15 at 22:03

score 1 · Answer 1 · answered Apr 21 '15 at 21:56

1

The generate CSS is perfectly OK except that it costs two more lines in file size.

If you really want your output, you can try this:

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;

  &.btn-default {
    color: @trans-default;
  }

  &.btn-primary {
    color: @trans-primary;
  }

  &.btn-default,
  &.btn-primary {
    &:hover {
      color: @trans-hover-color;
    }
  }
}

answered Apr 21 '15 at 21:56

Edmond Chui

660
9
6

I did the same thing. Thank you anyway. :) – LuTz Apr 21 '15 at 22:06

score 1 · Accepted Answer · answered Apr 21 '15 at 21:58

You can achieve this by using a class that is pretty much like grouping the selectors you want to use together.

Snipet

.custom-class(){
  .btn-trans.btn-default:hover,
    .btn-trans.btn-primary:hover {
    color: #f5f5f5;
    }
}/*-- end of the custom class --*/
.btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;

      &.btn-default {
        color: #ccc;

        &:hover {
          color: #ccc;
        }
      }

      &.btn-primary {
        color: #ccc;

        &:hover {
          color: #ccc;
        }
     }
  }

/*-- use of the custom class --*/
.custom-class;

or you can go for a nested approach by grouping on the upper level

snipet

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;

  &.btn-default {
    color: #ccc;
  }

  &.btn-primary {
    color: #ccc;
  }

  &.btn-default,
  &.btn-primary {
    &:hover {
      color: #ccc;
    }
  }
}

score 0 · Answer 3 · answered May 04 '15 at 10:09

0

use this

    .btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;
      &.btn-default {
        color: @color;
       }
     &.btn-primary {
       color: @color;
      }

     &.btn-default,
       &.btn-primary {
       &:hover {
       color: @color;
     }
   }
 }

answered May 04 '15 at 10:09

Shariq Ansari

3,941
1
27
30

How is this different from the second snippet in the accepted answer (other than the #ccc to @color change which you made just now)? – Harry May 04 '15 at 10:11
Oh sorry i did not saw the above answer. I am taking my answer back. going to delete it. – Shariq Ansari May 04 '15 at 10:19

Mixing in Less CSS

3 Answers3