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.

Maak Flashable Zip van elk bestand op Android met ZIPme

Iedereen die regelmatig ROMs flasht, begrijpt de pijn van het terugzetten van back-ups. Er zijn gewoon zoveel stappen en het is zo tijdrovend. Het zou mooi zijn als we al onze apps, gegevens en voorkeuren in een enkele flitsende zip zouden kunnen hebben die we zouden kunnen flitsen zonder dat we iets hoeven te herstellen

(Technische en ontwerptips)

Ontwerp een eenvoudig freelance contract met deze website

Als je freelancer bent, is de kans groot dat je op een bepaald moment een freelance contract hebt opgesteld. Hoewel het opstellen van een contract soms vervelend kan zijn, is het van cruciaal belang dat er iets misgaat tussen u en uw klant.Als u denkt dat u veel liever echt werk doet in plaats van gecompliceerde contracten op te stellen, dan bent u wellicht geïnteresseerd in deze webtool genaamd Het freelance contract .

(Technische en ontwerptips)