Share
CSS-verlopen hebben een behoorlijk rommelige syntaxis, nog erger wanneer u voorvoegsels van leveranciers toevoegt. In deze zelfstudie gaan we het maken van gradiëntkleuren intuïtiever maken met een LESS Mixin.
Onze Mixin zorgt voor drie soorten CSS-gradiënten, namelijk lineair, radiale, en herhalen. We zullen een aantal instellingen hebben om de verloopuitvoer te manipuleren, inclusief het gradiënttype, de kleurencombinatie en de gradiëntoriëntatie.
Hier is een demo van iets dat we kunnen maken met de resulterende mixin:
Laten we nu kijken hoe we het bouwen!
Om te beginnen zullen we de syntaxis bekijken die de drie gradiënttypen vormt, en uiteindelijk ons helpen onze Mixin te besturen.
// 1. lineaire achtergrondafbeelding met gradiënt: lineair verloop (90 graden, # ED4264, #FFEDBC); // 2. radiale gradient-achtergrondafbeelding: radiale gradiënt (cirkel, # ED4264, #FFEDBC); // 3. herhalende (lineaire) gradiëntherhalings-lineaire gradiënt (90 graden, # ED4264, #FFEDBC);
Dit zijn de CSS-syntaxisvormen voor gradiënt, volgens de W3C-standaard. Voorvoegsels van de leverancier zijn vereist om oudere browsers te ondersteunen.
Houd er rekening mee dat er een verschil is met de manier waarop oudere browsers (bij gebruik van de syntaxis van de prefix) de lineaire gradiëntoriëntatie renderen.
Vroeger was het zo dat de 90deg (die we hebben opgegeven om een lineair verloop te vormen) zou het verloop van onder naar boven omspannen, te beginnen met de # ED4264 naar #FFEDBC. 0deg werd geïnterpreteerd als van links naar rechts. De laatste specificatie daarentegen stelt dat vast 0deg wijst van onder naar boven, vandaar 90deg omspant het verloop van rechts naar links in plaats daarvan.
Quirks komen ook voor met de sleutelwoordwaarden die worden gebruikt om de gradiëntoriëntatie te definiëren. Eerdere specificaties gebruikten de trefwoorden top, links, rechts en bodem, terwijl de definitieve versie toevoegt naar, Vandaar naar boven, naar links, naar rechts, en Tot op de bodem.
De volgende demo toont twee gelijkgebouwde gradiënten, elk met behulp van de waarden 90deg, # ED4264, #FFEDBC. Aan de linkerkant worden voorvoegsels gebruikt en aan de rechterkant de moderne syntaxis.
Hoekwaarden zijn betrouwbaarder voor onze zaak. We kunnen het oude hoekgedrag gemakkelijk omzetten, ondanks de discrepantie, om hetzelfde gedrag te vertonen als in de definitieve specificatie met een eenvoudige aftrekking.
x = 90 - y
De Y is de hoek die we hebben opgegeven voor de standaardsyntaxis, terwijl de X is de waarde die moet worden gebruikt in de vooraf gedefinieerde syntaxis.
Laten we dan de Mixin maken. We noemen onze Mixin eenvoudigweg .gradiënt (), als volgt:
.gradient (@variables) when (@conditions)
De Mixin geeft een aantal variabelen door om het verlooptype, de kleurencombinaties, de voorvoegsels van de leverancier voor compatibiliteit met eerdere versies en de inhoudsopgave, net als de voorwaarden om de Mixin te herhalen.
We zullen standaardwaarden instellen voor de richting en de prefixen van de leverancier. Daarom, tenzij we de richting van het verloop willen wijzigen, hoeven we alleen het type en de kleuren.
Hier is een overzicht van de waarden die we nodig hebben:
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length (@prefixes)) when (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); // style goes here
Het is vermeldenswaard dat de meeste MINDER functies zoals Loop zijn geroot in Mixins. Dus, hoewel we hier technisch een Loop maken, kunnen we het nog steeds een Mixin noemen. De reden dat we een lus gebruiken, is omdat we meerdere exemplaren van de lus moeten genereren achtergrond of achtergrond afbeelding eigenschap om het verloop aan te geven, zoals:
achtergrondafbeelding: -webkit-lineair verloop (90 graden, rood, blauw); achtergrondafbeelding: -moz-linear-gradient (90deg, rood, blauw); achtergrondafbeelding: -ms-lineaire gradiënt (90 graden, rood, blauw); achtergrondafbeelding: -o-lineaire gradiënt (90 graden, rood, blauw); achtergrondafbeelding: lineair verloop (0deg, rood, blauw);
Dit is de volledige syntaxis om een CSS-gradiënt te genereren, wat een terugval oplevert voor sommige oudere browsers met een vooraf gedefinieerde syntaxis.
Om al deze regels te genereren, moeten we eerst elk voorvoegsel ophalen dat is gedefinieerd in de @prefixes verander en converteer de hoekwaarde die is ingesteld in de @dir. Vervolgens vormen we de gradiëntsyntaxis met de zogenaamde Escaping en Interpolation.
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length (@prefixes)) when (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extract (@prefixes, @index); @ dir-old: 90 - (@dir); background-image: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)";
Ontsnappen is handig als het gaat om het genereren van niet-standaard CSS-syntaxis, of een willekeurige reeks die mogelijk niet door LESS wordt herkend. MINDER geeft de code exact weer zoals deze wordt gevonden, met als enige uitzondering geïnterpoleerde variabelen. MINDER zal deze nog steeds vervangen door hun respectievelijke waarden.
Ten slotte zullen we de standaardsyntaxis genereren, die moet worden uitgevoerd na alle vooraf ingestelde waarden. Dit instrueert ondersteunende browsers om het op te halen in plaats van de syntaxis die vooraf is gedefinieerd. Om dit te doen, wikkelen we de standaardsyntaxis in een Mixin Guard als volgt:
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length (@prefixes)) when (@index> 0) .gradient (@type; @colors; @dir; @prefixes; (@index - 1)); @prefix: extract (@prefixes, @index); @ dir-old: 90 - (@dir); background-image: ~ "- @ prefix - @ type -gradient (@ dir-old, @ colors)"; & when (@index = length (@prefixes)) background-image: ~ "@ type -gradient (@ dir, @ colors)";
We stellen een voorwaarde in die de syntaxis uitvoert als de inhoudsopgave van de huidige iteratie is gelijk aan het aantal vooraf ingestelde prefixen @prefixes. Naarmate de lus-iteratie begint bij het grootste aantal en vervolgens naar beneden gaat 0, de standaardsyntaxis wordt gegenereerd samen met de eerste vooraf gedefinieerde syntaxis, wat in dit geval het geval is -O-.
Onze gradiënt Mixin is klaar, we kunnen het nu gebruiken!
Zoals gezegd, we zijn alleen verplicht om het verlooptype en de kleuren te specificeren, bijvoorbeeld:
.gradiënt (lineair; # 2BC0E4, # EAECC6);
Merk op dat elke parameter moet worden gescheiden met een ;. We gebruiken een komma om kleuren en leveranciersprefixen te vermelden.
Als u de kleurstop wilt aanpassen, kunt u schrijven:
.gradiënt (lineair; # 2BC0E4, # EAECC6 30%);
Het veranderen van de gradiëntrichting moet gebeuren met een hoekwaarde in plaats van zijn trefwoordtegenhanger:
.gradiënt (lineair; # 2BC0E4, # EAECC6 30%; 180deg);
Het volgende is een voorbeeld waarin we een radiaal verloop maken:
.gradiënt (cirkel; # 2BC0E4, # EAECC6);
Een herhalingsgradiënt genereren? Geen probleem:
.gradiënt (herhalend-lineair; # 085078, # 2BC0E4 25px, # EAECC6 50px);
Zorg er in dit geval voor dat u de background-size dienovereenkomstig om het gewenste resultaat te zien.
In deze zelfstudie hebben we een Mixin gemaakt om CSS-gradiëntgeneratie meer tot stand te brengen. We hebben ook geleerd over ontsnappen en interpolatie onderweg.
Bovendien is onze gradiënt Mixin een goed voorbeeld van het gebruik van Loop. In plaats van alle prefix-syntaxis op deze manier op te sommen:
.radiaal (@ richting: 50% 50%, @origin: #fff, @end: # 000) achtergrondkleur: # e9b90f; achtergrondafbeelding: -webkit-gradiënt (radiaal, @ richting, 0, @ richting, 200, van (@end), naar (@origin)); background-image: -webkit-radial-gradient (@direction, @origin, @end); achtergrondafbeelding: -moz-radial-gradient (@direction, @origin, @end); achtergrondafbeelding: -o-radiale gradiënt (@direction, @origin, @end); achtergrondafbeelding: -ms-radial-gradient (@direction, @origin, @end); achtergrondafbeelding: radiale gradiënt (@direction, @origin, @end);
... we itereren door een lijst met voorvoegsels van een variabele en voeren ze allemaal uit als we gaan. We kunnen meerdere kleuren in combinatie combineren en de haltes onbeperkt opgeven. Deze Mixin is echt heel flexibel.
Het enige ontbrekende stuk is de eigen syntaxis van Internet Explorer DXImageTransform.Microsoft.gradient, hoewel ik iedereen zou aanraden om naar de toekomst te kijken en Microsoft Edge in plaats daarvan!
Accentsconagua