Less: Define color according to Class

问题:

I have the following less code:

div.Tooltip {   
  cursor: default;  

  &.Info {background-color: #808080;} // Info

  &.Menu {background-color: #606060;} // Menu

  &.N:before {
    border-top: 6px solid @Color;
    bottom: -6px;
  } // N:BEFORE
}

Basically, I would like @Color in N:before would be the same as the background-color in Info or Menu, depending on which class the Tooltip has: "Tooltip Info" or "Tooltip Menu".

I tried to use variables but I always end up with the same values.

Is what I am trying to do possible with LESS?

回答1:

I am not 100% sure how you are trying to apply the before exactly ... or what your exact desired CSS should be.

To apply formatting specific to the parent rule to a child (or pseudo element), you could make a reusable parametric mixin, that takes the color as a parameter, sets the background and also adds the child rule (pseudo element) with the appropriate color (and other properties).

Maybe something like this:

.before(@color){
    background-color: @color;
    &:before {
      border-top: 6px solid @color;
      bottom: -6px;
    }
}

Then you can call the mixin for each class:

div.Tooltip {   
  cursor: default;  
  &.Info {
    .before(#808080);
  } // Info

  &.Menu {
    .before(#606060);
  } // Menu
}

and the CSS output will be:

div.Tooltip {
  cursor: default;
}
div.Tooltip.Info {
  background-color: #808080;
}
div.Tooltip.Info:before {
  border-top: 6px solid #808080;
  bottom: -6px;
}
div.Tooltip.Menu {
  background-color: #606060;
}
div.Tooltip.Menu:before {
  border-top: 6px solid #606060;
  bottom: -6px;
}

this will now apply the different color pseudo element to the different classes assigned to Tooltip.

Note: As said this should work (if you add content, width, height, and position to the pseudo elements), but if I were you I would revise your CSS. Is it really efficient to call div.Tooltip.Info for example? Can you combine some of the selectors in a smart way? But I guess I don't see the whole picture.

Here I add a jsfiddle demo with the produced CSS (I just added some different colors, cause the border wouldn't be visible on the same color background, and assigned some required properties to the shared :before selector, so that it gets displayed):

DEMO

...

Anyway, a mixin like the one I propose, would be an elegant way of adding the same element with specific alterations in multiple places.

回答2:

If you don't have a border on the Tooltip itself...

...then this will work (as the fiddle shows):

LESS

div.Tooltip {   
  cursor: default;  

  &.Info {
    background-color: #808080;
    border-top-color: #808080;
  } // Info

  &.Menu {
    background-color: #606060;
    border-top-color: #606060;
  } // Menu

  &.N:before {
    border-top: 6px solid transparent;
    //Firefox 22 bug did not allow inherit with border-top so I'm overriding
    border-top-color: inherit; 
    bottom: -6px;
  } // N:BEFORE
}

CSS Output

div.Tooltip {
  cursor: default;
}
div.Tooltip.Info {
  background-color: #808080;
  border-top-color: #808080;
}
div.Tooltip.Menu {
  background-color: #606060;
  border-top-color: #606060;
}
div.Tooltip.N:before {
  border-top: 6px solid transparent;
  border-top-color: inherit; /* for Firefox 22 bug */
  bottom: -6px;
}

**If you have a lot of "types" of Tooltips to define, then make a mixin and use that:

.buildTooltip(@type, @color) {
  &.@{type} {
    background-color: @color;
    border-top-color: @color;
  }
}

div.Tooltip {   
  cursor: default;  

  .buildTooltip(Info, #808080);
  .buildTooltip(Menu, #606060);
  .buildTooltip(Blahhhh, #ffffff);
  .buildTooltip(Mooooore, #ff0000);

  &.N:before {
    border-top: 6px solid transparent;
    //Firefox bug did not allow inherit with border-top
    border-top-color: inherit; 
    bottom: -6px;
  } // N:BEFORE
}

CSS Output (only the added "types" shown, else same as above)

div.Tooltip.Blahhhh {
  background-color: #ffffff;
  border-top-color: #ffffff;
}
div.Tooltip.Mooooore {
  background-color: #ff0000;
  border-top-color: #ff0000;
}