-1

LESS code: 

.btn-default:hover {
    background-color: rgba(217, 217, 217, 0.65);
    background-clip: content-box;

    .btn-default:focus {
        outline: 2px solid #047a9c;
    }
}

What i want to do here is that btn-default:focus should have background color of hover state but only focus state should have the outline. so the output CSS should be:

 .btn-default:hover {
     background-color: rgba(217, 217, 217, 0.65);
     background-clip: content-box;
 }

 .btn-default:focus {
     background-color: rgba(217, 217, 217, 0.65);
     background-clip: content-box;
     outline: 2px solid #047a9c;
 }

I am bit lost at the LESS nesting part, is this something possible with less? So that i don't have to duplicate the code.

Rachid O
  • 13,013
  • 15
  • 66
  • 92
Pahan
  • 27
  • 7

1 Answers1

0

You will have to nest pseudo-classes only into main selector. In this case .btn-default.

This is how it should look:

.btn-default {
  /* some code here */

  &:hover, &:focus {
    background-color: rgba(217, 217, 217, 0.65);
    background-clip: content-box;
  }

  &:focus {
    outline: 2px solid #047a9c;
  }
}

The & character has the function of a "this" keyword

From your original question:

.btn-default:hover {
  background-color: rgba(217, 217, 217, 0.65);
  background-clip: content-box;

  .btn-default:focus {
    outline: 2px solid #047a9c;
  }
}

Less doesn't work this way. Try to pronounce your code. Your code would be like this in CSS:

.btn-default:hover {
  background-color: rgba(217, 217, 217, 0.65);
  background-clip: content-box;
}

.btn-default:hover.btn-default:focus {
    outline: 2px solid #047a9c;
}

You have to nest pseudo-classes and pseudo-elements into main selector (.btn-default)

If you want more selectors, pseudo-elements or pseudo-classes to have same properties, you should use ,, not to nest one inside another.

Here are some helpful links:

Less to CSS compiler

LESS CSS nesting classes

Pseudo classes

Vepth
  • 665
  • 4
  • 20