Share
In deze tutorial zullen we het LESS uitgebreid behandelen lus (gekoppeld aan enkele andere LESS-functies die we in vorige berichten hebben besproken, zoals Mixins-bewakers en Kleurfuncties). Looping is een nuttige functie in LESS en stelt ons in staat om veel terugkerende stylingtaken te automatiseren.
"Lus" is een programmeermethode die een functie herhaalt (of itereert). Meestal wordt het gebruikt voor het verwerken van een lijst met gegevens. Als je ervaring hebt met een andere programmeertaal, zul je zeker eerder een lus tegenkomen.
In LESS zou de basissyntaxis er ongeveer zo uitzien:
.loop (@parameters) when (@condition) .loop (@parameters + 1); // iterate. // doe het ding hier.
We definiëren een LESS-lus op dezelfde manier als hoe Mixin Guards worden gedefinieerd, maar deze keer nesten we een MINDER-functie die de doorgegeven parameters zal verhogen: .loop (@parameters + 1). Afhankelijk van het scenario kan de functie ook een afname zijn: .loop (@parameters - 1). De functie lus en itereert zo lang als de voorwaarde: wanneer (@condition) is gekoppeld.
Laten we eens kijken hoe we een lus kunnen gebruiken in voorbeelden uit de echte wereld.
Laten we aannemen dat we een waarschuwingsvenster willen maken, dus we definiëren de basisstijlen; wat opvulling en een rand. We willen graag verschillende varianten van het waarschuwingsvenster maken om verschillende soorten meldingen over te brengen. U kunt bijvoorbeeld een rood waarschuwingsvenster hebben om een fout te tonen of groen om een melding te melden. Met een lus kunnen we het instellen van deze stijlen redelijk gemakkelijk maken.
Geef om te beginnen de lijst met kleuren en naamvarianten van het waarschuwingsvenster. Tel vervolgens het aantal variaties met behulp van de lengte() functie.
@colors: # ED5565, # A0D468, # F6BB42, # 5D9CEC; @namen: fout, succes, aandacht, info; @lengte: lengte (@kleuren);
Nu definiëren we de lus om de lijst uit te voeren:
.alert-variatie (@names; @colors; @index) wanneer (iscolor (extract (@colors, @index))) en (@index> 0) .alert-variation (@names; @colors; (@index - 1)); // decrement.
Zoals je hierboven kunt zien, wordt onze lus genoemd .alert-variatie, en het vereist een aantal parameters:
Accentsconagua
@names: we zullen deze variabele gebruiken om de lijst met variaties van waarschuwingsnamen door te geven.@colors: deze variabele geeft de kleurcodes van elke respectieve naam op de @nameslijst.@inhoudsopgave: deze variabele geeft het aantal namen en kleuren door dat we in de lijst hebben en die we ook zullen gebruiken voor het herhalen van de lus.We hebben ook een voorwaarde gedefinieerd waarop de lus moet worden uitgevoerd. De eerste voorwaarde die we in het bovenstaande voorbeeld stellen, zal evalueren of de waarden zijn doorgegeven aan de @colors zijn echte kleuren in plaats van willekeurige waarden (in welk geval we de lus zullen afbreken). De volgende ingestelde conditie zal de lus stoppen wanneer de @inhoudsopgave afname heeft bereikt 0.
Vervolgens definiëren we de regels die de stijlen vormen.
.alert-variatie (@names; @colors; @index) wanneer (iscolor (extract (@colors, @index))) en (@index> 0) .alert-variation (@names; @colors; (@index - 1)); // decrement. @name: extract (@names, @index); @color: extract (@colors, @index); .alert - @ name border-colour: darken (@color, 10%); kleur: donkerder (@color, 30%); achtergrondkleur: @color;
Aangezien we een lijst met de waarschuwingsvakkleuren gebruiken, moeten we het LESS gebruiken extract() functie om de bijbehorende kleur en naam binnen elke iteratie van de lus op te halen. Vervolgens voegen we de naam toe als de categorieselector, terwijl de kleur wordt toegepast op de grens, kleur, en de Achtergrond kleur eigenschappen.
We zijn er helemaal klaar voor en gebruiken de lus met de ingangen:
.alert-variatie (@names; @colors; @length);
We hebben een lijst met vier kleuren samen met een lijst van hun respectieve namen in de @names variabel. De iteratie van onze lus begint bij de 4e kleur van de lijst en gaat omlaag naar 0 terwijl we de @inhoudsopgave in elke iteratie. Voor elke iteratie genereert de lus de klassenaam en de variatie in stijlregels, vandaar dit voorbeeld gecompileerd in:
.alert-error border: # e8273b; kleur: # 99101f; achtergrondkleur: # ed5565; .alert-success border: # 87c940; kleur: # 537f24; achtergrondkleur: # a0d468; .alert-attention border: # f4a911; kleur: # 986807; achtergrondkleur: # f6bb42; .alert-info border: # 2f80e7; kleur: # 12509e; achtergrondkleur: # 5d9cec;
U kunt meer toevoegen aan de lijst en de lus compileert deze in een handomdraai in een nieuwe variant.
U kunt ook een vergelijkbare aanpak toepassen om een stijlpatroon van andere UI-elementen op uw website te maken, zoals de knoppen of (misschien) de merkkleuren van uw netwerksite.
Het web is vol met CSS-frameworks - en hoewel sommige van hen zijn ontworpen om "one size fits all" te zijn, is dat in de praktijk misschien niet altijd het geval. Heel vaak heeft u alleen het responsieve raster nodig. Dus waarom niet jouw eigen maken?
Lussen maken het maken van rasterklassen minder gedoe. Het volgende is een eenvoudige lus die de naam van de kolomklasse genereert en het breedtepercentage van elke naam bepaalt:
.grid (@name; @ columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) );
Merk op dat we nu een stap binnen de lus uitvoeren. Om deze reden hebben we de lusvoorwaarde ingesteld met (@index =< @columns) ("Terwijl de index kleiner is dan of gelijk is aan het aantal kolommen") om te voorkomen dat de iteratie het kolomnummer overschrijdt.
Gebruik deze lus door de naam voor de gegenereerde klasse-selector en het kolomnummer van het raster door te geven. Als het gaat om het benoemen van het is helemaal aan jou, hoewel je misschien de Bootstrap-conventie van zou willen volgen col-sm, col-md, en col-lg of misschien klein, medium, en groot het patroon van de Foundation volgen, zoals zo:
@media alleen scherm en (min-breedte: 360px) .grid (klein; 12);
Hier hebben we onze .rooster () lus en geeft de waarden door klein en 12. Dit zal compileren in:
@media alleen scherm en (min-breedte: 360px) .klein-12 width: 100%; . small-11 width: 91.66666667%; .small-10 width: 83.33333333%; ... klein-1 width: 83.33333333%;
Zoals je hierboven kunt zien, genereert onze lus momenteel alleen de breedte van de kolommen. We moeten deze kolommen ook zwevend maken, en er zijn een aantal manieren om dit te doen. We kunnen bijvoorbeeld een klassenkiezer toevoegen, zeg maar .kolom, nest het onder de @media querydefinitie en deze binnen de lus "uit te breiden".
// the loop .grid (@name; @ columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) ); & when ( @index < @columns ) &:extend(.column); // using the loop @media only screen and (min-width: 360px) .column float: left; .grid(small; 12);
Neem een kijkje en je zult zien dat we de :uitbreiden syntaxis onder een Mixin Guard. Dit zorgt voor de .kolom selector is alleen van toepassing op de 1e tot en met de 11e kolom, omdat we verwachten dat de 12e kolom volledig zal overspannen zonder de vlotter inmenging.
De lus genereert de volgende uitvoer bij het compileren:
@media alleen scherm en (min-breedte: 360px) .column, .small-11, .small-10, .small-9, .small-8, .small-7, .small-6, .small-5 , .small-4, .small-3, .small-2, .small-1 float: left; .small-12 width: 100%; . small-11 width: 91.66666667%;
Indien nodig kunt u de lus ook aanpassen om klassen te genereren voor het naar rechts duwen van kolommen. In Bootstrap staat dit bekend als compensatie. Nogmaals, we zullen dit niet genereren voor de 12e kolom sinds het compenseren van de kolom met 100% zou waarschijnlijk onpraktisch zijn.
.grid (@name; @ columns; @index: 1) when (@index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) ); & when ( @index < @columns ) &:extend(.column); // Generate the offset classes & when ( @index < @columns ) .@name-offset-@index margin-left: percentage( (@index / @columns) );
Onze lus zou nu een reeks nieuwe klassen moeten genereren bij het compileren:
@media only screen en (min-width: 360px) ... small-11 width: 91.66666667%; .small-offset-11 margin-left: 91.66666667%; .small-10 width: 83.33333333%; .small-offset-10 margin-left: 83.33333333%; .small-9 width: 75%; .small-offset-9 margin-left: 75%; ...
Voor sommigen is het idee van de lus misschien niet zo eenvoudig om te begrijpen. En dat is heel normaal; het kostte me enige tijd voordat ik uitvond wat ik met loops moest doen. Hopelijk zal deze tutorial je een goede start geven. Hier hebben we laten zien hoe snel UI-stijlpatronen kunnen worden gegenereerd. We hebben ook geleerd hoe we ons eigen rastersysteem kunnen creëren, zodat we ons meer bewust kunnen zijn van de stijlen op onze website in plaats van blindelings code-bloat toe te voegen met een raamwerk dat we niet nodig hebben.
Voel je vrij om deze tutorial een paar keer te lezen om erachter te komen hoe de lus te gebruiken en je CSS-stijl authoring efficiënter te maken.
