Geek Answers Handbook

What will be the use of the parent selector (&) as a selector? Is it wrong to use such selectors?

After reading the tutorial after Lessation (LessCSS), I was just wondering how this operator &should be used. I know that it refers to the parent element:

div {
  &.fullheight {
    height: 100%;
  }
}

// turns into

div.fullheight {
  height: 100%;
}

But I often saw this:

div {
    span {
        & {
          padding: 1em;
          margin: 1em;
        }
    }
}

// turns into

div span {
  padding: 1em;
  margin: 1em;
}

As with ONLY using an operator &inside a class, it is an almost parent element, but it does this bad practice, as you can have the same result when you type like this:

div {
    span {
      padding: 1em;
      margin: 1em;
    }
}

Both work, so is it a bad / good practice, or can each of them be used in different situations?

, , & - .

LESSCSS - - ScottS, .

+4
1

- , & . div span.

div {
  span {
    & {
      padding: 1em;
      margin: 1em;
    }
  }
}

, , & ( ).

, , , , Less.

, (, ).

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
  @val: .2; 
  padding: @setUnit;
  @val: .1; 
  margin: @setUnit;
}

@val . Less , (), , .

, . CSS, .

, CSS 0.1em padding margin, padding 0.2em margin 0.1em.

, ( ) , , . , , .

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
  &{
    @val: .2; /* this declaration applies only within this nest */
    padding: @setUnit;
  }
  &{
    @val: .1; /* this declaration applies only within this nest */
    margin: @setUnit;
  }
}

( ), , Less.

, Less v2, Less , Bass Jobsen. .

-max .

Bottomline , & . , Less. - , & , , .

+4

More articles:


All Articles