Css-Less Class Extend Class with Pseudo Class

CSS-Less class extend class with pseudo class

UPDATE:
If you can't modify external files just redefine the selectors, and add missing states:

.btn {
  // not adding anything here, won't affect existing style
  &:hover {
    // adding my own hover state for .btn
    background: yellow;
    ...
  }
}

// this will make your foo button appear as in external style
// and have the :hover state just as you defined it above
.btn-foo {
  .btn;
}

Better now? :)

---

You don't need pseudo class. It will just work :)

Try this:

.btn {
  background: yellow;

  &:hover { // define hover state here
    background: green;
  }
}

button {
  .btn;
}

Each <button class='btn'> element you create will inherit whatever was defined, including hover state. I think it's one of the main amazing features of LESS.

Hope this helps.

Using :extend() in LESS with pseudo-elements

It seems like you are looking for the following:

.alert-warning:extend(.base-alert all) {
  color: orange;

  &:before {
    content: "warning-icon-unicode";
  }
}

This basically just extends .alert-warning from .base-alert using the all keyword. Then the content value for the pseudo-element is changed to warning-icon-unicode and the color is changed to orange.

---

Based on your comment about extending to multiple classes, I guess you could use the following, which will essentially just alias the selector:

.alert-warning, .alert-warning2 {
  &:extend(.base-alert all);

  color: orange;

  &:before {
    content: "warning-icon-unicode";
  }
}

Alternatively, depending on your preferences, you could also use the following, which will produce the same desired results.

.alert-warning:extend(.base-alert all),
.alert-warning2:extend(.base-alert all) {
  color: orange;

  &:before {
    content: "warning-icon-unicode";
  }
}

..this will work the same as well:

.alert-warning:extend(.base-alert all) {
  color: orange;

  &:before {
    content: "warning-icon-unicode";
  }
}

.alert-warning2:extend(.alert-warning all) {}

LESS add class with pseudo selector

You can use the extend option like below. It basically applies all properties of the arrow class to the button class also. The all keyword means the child classes are also extended.

LESS:

.button{
    background: blue;
    &:extend(.arrow all);
    &:before{
        border: 1px solid;
    }
}

Compiled CSS:

.arrow,
.button {
    color: red;
}
.arrow:before,
.button:before {
    content: ">";
}

How to reuse pseudo class in less?

In Less you can not mixin pseudo classes, see also Allow for pseudo-classes to be used as mixins.

Probably you can use extend to solve your problem as already suggested by @Harry.

.cssClass:before {
content: "test";
}
.lessClass:extend(.cssClass:before){}

The preceding Less code will compile into the following CSS code:

.cssClass:before,
.lessClass {
  content: "test";
}

or use: .lessClass:before:extend(.cssClass:before){} that will compile into:

.cssClass:before,
.lessClass:before {
  content: "test";
}

Is there a way to use css pseudo classes as mixins with lesscss compilers?

I don't believe that is how you use mixin's in Less.

You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.

If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:

.link {
  color: #138CB4;
  text-decoration: none;
}

a:link {
  .link;
}

a:visited{
  .link;
  color: #84B6CD;
}

Does LESS have an extend feature?

Yes, Less.js introduced extend in v1.4.0.

:extend()

Rather than implementing the at-rule (@extend) syntax used by SASS and Stylus, LESS implemented the pseudo-class syntax, which gives LESS's implementation the flexibility to be applied either directly to a selector itself, or inside a statement. So both of these will work:

.sidenav:extend(.nav) {...}

or

.sidenav {
    &:extend(.nav);
    ...
}

Additionally, you can use the all directive to extend "nested" classes as well:

.sidenav:extend(.nav all){};

And you can add a comma-separated list of classes you wish to extend:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

When extending nested selectors you should notice the differences:

nested selectors .selector1 and selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

Now .selector3:extend(.selector1 .selector2){}; outputs:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, .selector3:extend(.selector1 all){}; outputs:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

,.selector3:extend(.selector2){}; outputs

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

and finally .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

Extending nested selectors in LESS

With the requirements you listed you will want to do something like this:

.table tr {
   &:hover {
     color: red;
     .c1, .c2, .c3 {
       color: green;
     }
   }
}

Think of & as anything you want to be at the same level as the parent level, whether it be a class or a pseudo class.

When you nest items usually it matches the HTML structure/hierarchy so deciding how and where to nest is fairly straightforward. You want to share as much as possible without going overboard in getting to "nested hell".

---

Related Topics