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.

Propeller Framework Combineert Bootstrap & Google Material Design

De immense populariteit van Google's materiaalontwerp zou geen verrassing moeten zijn. Het maakt deel uit van een moderne UI-stijl die zich meer richt op een vlak ontwerp met de nadruk op UX en bruikbaarheidspatronen .Door de materiële ontwerpconcepten te nemen en toe te voegen aan Bootstrap, krijgen we het Propeller-raamwerk .

(Technische en ontwerptips)

Hoe maak je heerlijke frieten Icon - Photoshop Tutorial

Welkom bij de Hongkiat Baking & Culinary Arts Class! Vandaag zullen we je leren hoe je een visueel lekker frietjes icoon maakt met alleen Photoshop!Ja, je zult leren om een ​​heerlijk frietjes icoon te maken met voornamelijk een aantal vormcreaties en laagstijlen, bakker verwelkomd! Deze tutorial zal je zeker compleet maken.Erm

(Technische en ontwerptips)