3 Nieuwe MINDER CSS-functies die u moet kennen

Het is een tijd geleden sinds onze laatste discussie over LESS CSS. Tegenwoordig heeft LESS CSS versie 1.5 bereikt, en het is geëvolueerd met nieuwe functies die het krachtiger maken als een CSS Pre-processor.

Er zijn een hele reeks nieuwe toevoegingen in opgenomen en in deze post gaan we je door 3 van mijn nieuwe favoriete functies, verwijzingen naar extern bestanden, Extend, samenvoegeigenschappen, die ons kunnen helpen betere CSS te schrijven. Laten we kijken.

Bestand importeren

Laten we eerst eens kijken hoe LESS CSS omgaat met externe bestanden met de regel @import .

Sommige mensen splitsen hun stylesheet op in meerdere bestanden in plaats van ze in één pot te plaatsen. Vervolgens importeren ze ze met de @import naar een ander stylesheet, zodat de Mixins (evenals de variabelen ) van die bestanden kunnen worden hergebruikt in dat andere bestand.

 @import "external.less"; 

Het probleem is dat LESS alle Mixins uit deze externe bestanden compileert, zodat we zouden eindigen met meerdere stijlregels die hetzelfde definiëren.

Bekijk het volgende voorbeeld: We hebben twee MINDER-bestanden met de naam style.less en external.less . We importeren het externe.less in style.less . Vervolgens hebben we .square mixin in external.less om de stijl voor vierkante vakken te definiëren. Binnen de style.less gebruiken we de mixin zoals zo.

 @import "extern"; .box {.square; } 

Dit levert het volgende resultaat op in CSS. De stijlregels van .square mixin worden ook gegenereerd - wat niet goed is.

 .square {width: 100px; hoogte: 100 px; marge: 0 auto; achtergrondkleur: rood; } .box {width: 100px; hoogte: 100 px; marge: 0 auto; achtergrondkleur: rood; } 

In versie 1.5 is LESS geïntroduceerd (reference), die kan worden gebruikt om MINDER op te dragen het importbestand alleen voor referentie te gebruiken en niet om de inhoud uit te voeren.

Zet de (reference) instructie op deze manier:

 @import (referentie) "extern"; 

Compileer de LESS-stylesheet en nu wordt de .square niet uitgevoerd.

 .box {width: 100px; hoogte: 100 px; marge: 0 auto; achtergrondkleur: rood; } 

Uitbreiden

Uitbreiden methode is pure awesomeness. Technisch gezien groepeert het selectors die dezelfde stijlregels delen, wat resulteert in schonere en meer georganiseerde CSS . Wanneer we een website bouwen, kunnen we bij sommige poins enkele selectors hebben met vrijwel dezelfde stijlregels, zoals hieronder:

 .box {width: 100px; hoogte: 100 px; marge: 0 auto; rand: 1px effen zwart; achtergrondkleur: transparant; } .box2 {width: 100px; hoogte: 100 px; marge: 0 auto; rand: 1px effen zwart; achtergrondkleur: rood; } 

Het is overbodig en volgt niet de beste werkwijzen, die suggereren dezelfde stijlen samen te voegen. Sass is in dit geval bekend met zijn @extend richtlijn om dit werk te doen, in MINDER kunnen we iets soortgelijks doen met &:extend(), geïntroduceerd in versie 1.4.

Gezien het bovenstaande voorbeeld kunnen we doen:

 @import (referentie) "extern"; .box {&: extend (.square); achtergrondkleur: transparant; } .box2 {&: extend (.square); achtergrondkleur: rood; } 

Wanneer gecompileerd naar normale CSS, zal de bovenstaande code produceren:

 .square, .box, .box2 {width: 100px; hoogte: 100 px; marge: 0 auto; rand: 1px effen zwart; } .box {achtergrondkleur: transparant; } .box2 {achtergrondkleur: rood; } 

Eigenschap samenvoegen

Een andere leuke nieuwe functie is Eigenschap samenvoegen . Deze functie is van toepassing op de CSS-eigenschap die meerdere waarden accepteert, zoals transformatie, overgang en vakschaduw . En zoals de naam al aangeeft, worden er waarden samengevoegd die tot hetzelfde eigendom behoren. Laten we dit onderstaande voorbeeld eens bekijken.

Zoals u waarschijnlijk al weet, accepteert de CSS3 Box Shadow-eigenschap meerdere schaduwwaarden. Door deze samenvoegeigenschap te gebruiken, kunt u eenvoudig een schaduweffect opbouwen en beter beheersbaar maken.

Hier maken we twee mixins. .inner-shadow en. .outer-shadow - Ik vermoed dat de namen voor zich .outer-shadow .

 .inner-shadow {box-shadow +: inzet 10px 10px 5px #ccc; } .outer-shadow {box-shadow +: inzet 10px 10px 5px #ccc; } 

Merk op dat we een + -teken toevoegen aan het einde van de naam van de accommodatie. Dit + -teken is vereist om deze functie te laten werken. Vervolgens kunnen we deze mixins gebruiken, zoals:

 .box {.inner-shadow; Buitenste-shadow; } .box2 {.inner-shadow; } .box3 {.outer-shadow; } 

Deze code geeft ons het volgende resultaat.

 .box {vakschaduw: inzet 10px 10px 5px #ccc, 10px 10px 5px #ccc; } .box2 {vakschaduw: inzet 10px 10px 5px #ccc; } .box3 {box-shadow: 10px 10px 5px #ccc; } 

Laatste gedachte

Deze 3 nieuwe functies - Referencing External File, Extend, Merging Property - motiveerde me om MINDER meer te gebruiken. Met hen kunnen we betere en beter beheersbare CSS schrijven. Ik kijk uit naar meer coole nieuwe mogelijkheden die LESS in de komende versies biedt.

10 handige tips om uw kleurstalen en paletten geordend te houden

Weten dat je iets hebt, maar niet weten waar het is, kan een frustrerend gevoel zijn. Dit kan met name gelden voor kleuren die u hebt gemaakt of opgeslagen voor uw ontwerpprojecten. Het is verspilling van tijd om door kleurstalen te moeten zoeken, gewoon om overal opnieuw te moeten zoeken wanneer het tijd is om van kleur te wisselen

(Technische en ontwerptips)

Communicatie Blunders - Maakt u deze 3 marketingfouten?

Ooit geprobeerd om een ​​gesprek te hebben met iemand met wie je geen gemeenschappelijke taal deelt? Het kan leuk zijn, onder de juiste omstandigheden (handgebaren zijn een grote ijsbreker), maar als geen van jullie de woorden heeft om je naar behoren te uiten, kan het snel frustrerend worden.Freelance ontwerpers zijn berucht omdat ze gemengde berichten naar potentiële klanten sturen - ze willen een te breed publiek bereiken, of ze hebben gewoonweg hun markt niet genoeg bestudeerd om te weten wat hun ideale klanten willen horen.In d

(Technische en ontwerptips)