lessAan de slag met minder


Opmerkingen

Less is een open-source pre-processor. Het maakt het schrijven en onderhouden van CSS eenvoudiger doordat de auteur variabelen, mixins etc. kan definiëren en gebruiken. Het heeft ook functies zoals Guards die voorwaardelijke stijlen kunnen schrijven, Loops die helpen om de code DRY te houden en veel ingebouwde functies om wiskundige bewerkingen, string- en kleurmanipulaties etc. uit te voeren

Niet te verwarren met de Unix-tool met dezelfde naam.

versies

Versie Publicatiedatum
2.7.1 2016/05/09
2.7.0 2016/05/07
2.6.1 2016/03/04
2.6.0 2016/01/29
2.5.3 2015/09/25
2.5.2 2015/09/24
2.5.1 2015/05/21
2.5.0 2015/04/03
2.4.0 2015/02/07
2.3.1 2015/01/28
2.3.0 2015/01/27
2.2.0 2015/01/04
2.1.2 2014/12/20
2.1.1 2014/11/27
2.1.0 2014/11/23
2.0.0 2014/11/09
1.7.5 2014/09/03
1.7.4 2014/07/27
1.7.3 2014/06/22
1.7.2 2014/06/19
1.7.1 2014/06/08
1.7.0 2014/02/27
1.6.3 2014/02/08
1.6.2 2014/02/02
1.6.1 2014/01/12
1.6.0 2014/01/01
1.5.1 2013/11/17
1.5.0 2013/10/21
1.4.2 2013/07/20
1.4.1 2013/07/05
1.4.0 2013/06/05
1.3.3 2012-12-30
1.3.2 2012/12/28
1.3.1 2012-10-18
1.3.0 2012-03-10
1.2.1 2012-01-15
1.2.0 2012-01-07

Het wijzigingslogboek voor alle versies is te vinden op de officiële GitHub-pagina .

Een less-bestand compileren vanaf de opdrachtregel

lessc [options] <source> [destination]
 

De bovenstaande opdracht wordt gebruikt om Minder bestanden op de opdrachtregel te compileren. Opties zijn de verschillende instellingen die de compiler tijdens de compilatie of na de compilatie moet gebruiken. Opties omvatten -x of --compress voor het comprimeren of verkleinen van het output CSS-bestand, -sm=on of --strict-math=on voor het toepassen van wiskundige bewerkingen alleen op waarden tussen haakjes enz. Het volgende komt het pad van de bron Minder bestand dat moet worden gecompileerd. Bestemming is het pad en de naam van het uitvoerbestand. Als dit niet wordt opgegeven, wordt de uitvoer afgedrukt in het opdrachtregelvenster zelf.

Beschouw de onderstaande Minder code

/* Filename: test.less */
#demo {
 color: @color;
 background: beige;
 width: 100% / 4;
}
@color: red;
 

Gecompileerde CSS afdrukken in opdrachtvenster:

Wanneer de volgende opdracht wordt uitgevoerd op de opdrachtregel, wordt het bestand test.less gecompileerd en wordt de uitvoer rechtstreeks in het opdrachtvenster afgedrukt omdat er geen bestemmingspad is opgegeven.

lessc test.less
 

Output:

#demo {
  color: red;
  background: beige;
  width: 25%;
}
 

Maak een CSS-bestand en schrijf gecompileerde uitvoer naar het bestand:

Wanneer hetzelfde bestand wordt gecompileerd met de onderstaande instructie, wordt een bestand met de naam test.css gemaakt in hetzelfde pad als het bestand test.less en wordt de uitvoer naar dat CSS-bestand afgedrukt / geschreven.

lessc test.less > test.css
 

Maak een CSS-bestand en verklein het:

Met de onderstaande opdracht wordt de uitvoer naar een CSS-bestand afgedrukt / geschreven en aan het einde ook gecomprimeerd.

lessc -x test.less > test.css
 

Output:

#demo{color:red;background:beige;width:25%}
 

Met de optie Strikte wiskunde ingeschakeld:

Als de optie voor strikte overeenkomsten is ingeschakeld, is de uitvoer als volgt omdat de waarden voor width niet tussen accolades staan.

lessc -sm=on test.less > test.css
 

Output:

#demo {
  color: red;
  background: beige;
  width: 100% / 4;
}
 

Installatie of instellingen

Less is een van de populairste CSS-pre-processors geweest en is ook op grote schaal geïmplementeerd in tal van front-end frameworks zoals Bootstrap, Foundation, enz. De Less Compiler is een op JavaScript gebaseerde compiler die kan worden verkregen via een Content Delivery Network :

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
 

U moet uw Less-document toevoegen voordat de JavaScript-compiler wordt geladen met de tag <link /> . Het Less stylesheet samen met de compiler ziet er zo uit:

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
 

Opmerking: het compileren van minder aan de clientzijde (of in de browser) wordt over het algemeen niet aanbevolen. Het mag alleen worden gebruikt voor ontwikkeling of bij gebruik van dynamische instellingen die het niet mogelijk maken om server-side te compileren.

Deelnemen aan bestanden - importeren

Met de instructie @import kunt u CSS / Less-code van een ander bestand in uw eigen CSS / Less-bestand invoegen.

.foo {
  background: #900;
}
@import "my-other-css-file.css";
@import "my-other-less-file.less";
 

Nesten in minder

In Less kun je veel eenvoudigere CSS-regels schrijven en ze ook goed opgemaakt houden, dus in plaats van deze code te schrijven:

CSS

.item {
  border: 1px solid;
  padding: 4px;
}
.item .content, .item .image {
  float: left;
}
.item .content {
  font-size: 12px;
}
.item .image {
  width: 300px;
}
 

je kunt dit gewoon schrijven:

Minder

.item {
  border: 1px solid;
  padding: 4px;
  .content, .image {
    float: left;
  }
  .content {
    font-size: 12px;
  }
  .image {
    width: 300px;
  }
}
 

en Less zal die code compileren in de normale CSS die we allemaal kennen.

Voorbeeld minder syntaxis

Het volgende voorbeeld is een voorbeeld van een Less-bestand dat laat zien hoe variabelen worden gedeclareerd en gebruikt, hoe mixins worden gedefinieerd en in Less worden opgeroepen.

/* Variables */
@color-base: #87ceeb;

/* Simple mixin to set border */

.set-border(@width; @style; @color) {
  border: @width @style darken(@color, 10%);
}

/* Main CSS */
.class1 {
  background-color: @color-base;
  .set-border(1px; solid; @color-base);
  .class2 {
    background-color: #fff;
    color: @color-base;
    .set-border(1px; solid; #fff);
  }
}
 

De bovenstaande code zal bij het compileren de volgende CSS produceren: (opmerkingen zijn kort en bondig)

.class1 {
  background-color: #87ceeb;
  border: 1px solid #5bbce4;
}
.class1 .class2 {
  background-color: #fff;
  color: #87ceeb;
  border: 1px solid #e6e6e6;
}