CODEWITHSUNDEEP
cssless
Martin Dawson
Martin Dawson

Reputation: 7656

Less variables in selector with &

I want to use the & to attach a pseudo :not to the parent class however I don't know how to do this when using mixins and variable selectors.

.hideElement(@selector, @maxWidth) {
  @media (max-width: @maxWidth) {
    @{selector} {
      display: none;
    }
  }
}

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) {
  .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 580px);
}

The output I want is:

.jp-sleek.jp-audio:not(.jp-state-no-volume-support):not(.jp-state-full-screen) .jp-title-container {
  display: none;
}

The current output is (notice the space in the :not):

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) :not(.jp-state-full-screen) .jp-title-container {
  display: none;
}

I know I need to use the & selector but this doesn't work:

.hideElement(~&':not(.jp-state-full-screen) .jp-title-container', 580px);

How do I do this?

Full code for context:

.jp-sleek.jp-video,
.jp-sleek.jp-audio.jp-state-no-volume-support {
  .hideElement(~'.jp-repeat', 400px);
  .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 530px);
  .hideElement(~'.jp-download', 580px);
}

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) {
  .hideElement(~'.jp-full-screen', 400px);
  .hideElement(~'.jp-repeat', 450px);
  .hideElement(~':not(.jp-state-full-screen) .jp-title-container', 580px);
  .hideElement(~'.jp-download', 630px);
}

Upvotes: 1

Views: 106

Answers (1)

Harry
Harry

Reputation: 89750

The & cannot be used as a parameter to a mixin or as part of the parameter to a mixin. When used in that way the & would have no special meaning. It wouldn't resolve to the parent selector and will just remain as &. Plus the below line is incorrect because the ~ must be followed by a ".

.hideElement(~&':not(.jp-state-full-screen) .jp-title-container', 580px);

I'd strongly urge you to have a look at the alternate method suggested by seven-phases-max in his comment. But a very simple solution to your problem while retaining your code-base as-is will be the following. Just take the &:not(...) part out, put it as its own block and then invoke .hideElement mixin within this block with just the other part of the selector (the child selector) as input.

.jp-sleek.jp-video,
.jp-sleek.jp-audio.jp-state-no-volume-support {
  .hideElement(~'.jp-repeat', 400px);
  &:not(.jp-state-full-screen){ /* take the not part out and put it as a block */
    .hideElement(~'.jp-title-container', 530px);
  }
  .hideElement(~'.jp-download', 580px);
}

.jp-sleek.jp-audio:not(.jp-state-no-volume-support) {
  .hideElement(~'.jp-full-screen', 400px);
  .hideElement(~'.jp-repeat', 450px);
  &:not(.jp-state-full-screen) { /* take the not part out and put it as a block */
    .hideElement(~'.jp-title-container', 580px);
  }
  .hideElement(~'.jp-download', 630px);
}

Upvotes: 1

Related Questions