Allmänt om LESS

Börja gärna läsa här:

Language Features | Less.js.

Fokusera på att läsa om och förstå följande fyra huvud-features hos LESS:

  • variabler
  • nested rules
  • mixins
  • parametric mixins (funktioner)

Lite fler exempel på parametric mixins hittar du här:

Useful CSS3 LESS Mixins | CSS-Tricks.

Notera: Nested rules och pseudo-klasser, samt child och sibling-selektorer

De flesta exempel man ser på nested rules handlar om att skriva in descendent-selektorer nested i andra regler. Men man kan även nesta child: och sibling-selektorer:

#header {
  color: black;
  &:hover {
    /* A different color when we hover the #header */
    color:green;
  }
  & > .navigation {
    font-size: 12px;
  }
  & + .logo {
    width: 300px;
  }
}

Notera användningen av ”&” här – det betyder ”jag” (dvs #header i exemplet). I ett programmeringsspråk skulle det ha motsvarats av ”this”.

0 votes