VDL Webdevelopment 

LESS is more, much more

Al een tijdje werk ik met OctoberCMS omdat het mij meer efficientie biedt. Maatwerk componenten bouw ik gemakkelijker in dit framework en de klant krijgt een super overzichtelijke backend. Maar er nog een ander voordeel aan OctoberCMS: het systeem is voorzien van een zg. less-compiler. Less heeft de volgende mechanismen: variabelen, nesten, mixins, operatoren en functies. Hiermee kun je je CSS op een veel doelmatiger manier gebruiken.

Variabelen

In LESS is het mogelijk variabelen te gebruiken. De waarde van die variable wordt dan als waarde in het CSS-bestand geplaatst.

Wanneer je onderstaande code in het .less-bestand plaatst:

@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

Wordt in het .css-bestand onderstaande code gezet.

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Zo kun je variabelen toepassen om bijvoorbeeld de belangrijkste website kleuren te definieren. Wanneer je een kleur wilt wijzigen hoef je dat maar op een plaats te doen en zal de kleur overal worden aangepast.

Mixins

Met Mixins kun je ‚Äč‚Äčalle eigenschappen van een klasse in een andere klasse opnemen.

Als je de volgende code opneemt in je .less-bestand:

.rounded-corners (@radius: 5px 10px 8px 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px 25px 35px 0px);
}

Wordt in het .css-bestand onderstaande code gezet:

#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

Parametric mixins

Less heeft daarnaast een speciale ruleset 'parametric mixins', deze accepteert parameters.

Als je de volgende code opneemt in je .less-bestand:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

Wordt in het .css-bestand onderstaande code gezet:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Zoals in bovenstaand voorbeeld te zien is kun je ook css-waarden nesten. Dit geeft een enorm belangrijk voordeel bij het opschonen van je code. In het voorbeeld geldt de onderste waarde van de link alleen voor links die binnen een paragraaf staan die in een container met de id header voorkomt.

Functies en operaties

In LESS kun je gebruik maken van operaties en functies. Operaties staan toe dat je waarden calculeert: optellen, aftrekken, vermenigvuldigen van CSS-waarden is daardoor mogelijk.

Als je de volgende code opneemt in je .less-bestand:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Wordt in het .css-bestand onderstaande code gezet:

#header {
  color: #333333;
  border-left: 1px;
  border-right: 3px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

LESS is al volledig geintegreerd in OctoberCMS

Je hoeft niets te installeren om van deze functies gebruik te maken, het zit al in de basisinstallatie van OctoberCMS. Je moet het alleen even aangeven in de header. Als je deze code aan de header toevoegd kun je van alle bovengenoemde mogelijkheden gebruik maken.

<link href="{{ [ 'assets/less/custom.less' ]|theme }}" rel="stylesheet">

Maak het bestand custom.less aan in de map assets/less. In het custom.less bestand plaats je je eigen less-codes.

Posted in October CMS on Feb 09, 2017