Share
De webontwikkelgemeenschap heeft recentelijk groot nieuws ontvangen. Hoewel we nog niet in de nachtelijke uren zijn, zijn er opnieuw experimenten aan de gang die, als ze succesvol zijn, native ondersteuning bieden voor CSS-variabelen, -mixins en -modules in browsers. De vraag is echter dat dit een goede zaak is?
Voordat we verder gaan, moet u er rekening mee houden dat deze ontwikkelingen zich nog maar in de experimentele fase bevinden. Ze zijn nog niet in een browser geïmplementeerd.
Als u bescheiden bekend bent met CSS-preprocessors, zoals Less of SASS, heeft u een basiskennis van wat u van deze toevoegingen kunt verwachten. (Dat gezegd hebbende, de voorgestelde syntaxis is helaas een beetje anders.) In de toekomst zul je de mogelijkheid hebben om variabelen (globaal en lokaal) en mixins te maken, die je kunt beschouwen als een verzameling stylings die gemakkelijk kunnen worden waarnaar wordt verwezen.
Zolang ik me kan herinneren, heeft de community opgeroepen naar CSS-variabelen; dus wat was de overval? In één woord: onenigheid. In 2008 speelde webkit al met deze functie - en zelfs tot het moment waarop het in de nachtelijke uren werd geïmplementeerd - hoewel het voorstel niet lang daarna tot stilstand kwam. Velen vonden die veranderende CSS tot een meer programmer-achtig taal zou alleen frustratie introduceren; sommigen voelden zelfs dat dit ontwerpers zou kunnen verwarren. Als de primaire kleur in uw project bijvoorbeeld is opgeslagen in een variabele, vermoedelijk bovenaan uw stylesheet, moet de ontwerper dan verwijzen naar twee locaties.
@myColor: rood;
/ * Minder syntaxis * / #someElem color: @myColor;
Hoewel dit argument tot op zekere hoogte geldig is, houdt het niet veel gewicht in. De meeste ontwerpers onderhouden een set website-kleuren bovenaan hun stylesheet, die ze gebruiken ter referentie. Het introduceren van variabelen om deze waarden te bevatten is een logische oplossing.
Minder of SASS-fans zullen gewend zijn om variabelen te definiëren zoals:
/ * Minder * / @primary_color: rood; / * SASS * / $ primary_color: rood;
De voorgestelde syntaxis bemoeilijkt de dingen een beetje door variabelen in te voeren. Bijvoorbeeld:
/ * Verklaring * / @var primaire kleur rood; / * Gebruik * / body kleur: var (primary_color);
Accentsconagua
@var kleur sleutelwoord in de bovenstaande code. var functie en geef de naam van de variabele door. Ik moet toegeven: het lijkt een beetje overbodig om de @var richtlijn. De syntaxis die SASS en Less gebruiken lijkt meer geschikt en schoner. @myVar is beknopter dan @var myVar.
Variabelen typen zijn een welkome toevoeging, aan de andere kant.
Variabelen zijn getypt. Elk primitief waardetype, elke eigenschap en een paar extra gemakstypes bestaan. Dit laat ons de nieuwe CSSOM-dingen aan hen ontmaskeren:
document.styleSheets [0] .vars ['primary_color']. alpha = .5;
-- xanthir.com
Variabelen kunnen ook worden uitgebreid naar een aangiftevak, via het gebruik van de @local richtlijn. Dit kan handig zijn als een variabele slechts één of twee keer binnen een project hoeft te worden gebruikt.
.box / * Declaration * / @local box_gradient background linear-gradient (top, zwart, wit); / * Gebruik * / achtergrond: var (box_gradient);
Mix-ins kunnen ongelooflijk nuttig zijn. In feite hebben we het proces van het maken van een klassenbestand met mix-ins niet zo lang geleden besproken op Nettuts +. U kunt hier hier over lezen - hoewel u er rekening mee moet houden dat de techniek (en) die in dat artikel worden gepresenteerd, afhankelijk zijn van de Less preprocessor. De nieuwe experimenten gebruiken wederom een iets andere syntaxis.
/ * Minder * / .border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; grensradius: @radius; / * SASS * / @mixin border-radius ($ straal: 3px) -webkit-border-radius: $ straal; -moz-border-radius: $ straal; grensradius: $ straal; / * En mogelijk de native oplossing ?? * / @mixin border-radius (radiuslengte 3px) -webkit-border-radius: var (radius); -moz-border-radius: var (radius); grensradius: var (radius);
Let op de overeenkomsten tussen SASS en de voorgestelde native oplossing voor mixins. Dit is te wijten aan het feit dat leden van het SASS-team als adviseurs dienen.
Zoals je misschien weet, staan Less en SASS je toe om dit te doen nest selectors. Dit kan de grootte van uw stylesheets drastisch verminderen, omdat het de behoefte aan dezelfde selector herhaaldelijk verwijdert.
/ * De huidige manier * / #content ... #content p ... #content pa ... #content pa: hover ... / * Minder en SASS * / #content ... p ... a ... & : hover ... / * En natuurlijk ?? * / #content ... @This> p ... @this> a ... @this: hover ...
Hoewel de voorgestelde syntaxis meer is langdradig, Het heeft een mooie OO-achtige syntax, waardoor veel ontwikkelaars zich meteen thuis voelen.
Maar onthoud - niet alle ontwerpers zijn ontwikkelaars.
Standaard in Less zijn alle variabelen globaal, voor alle doeleinden en doeleinden. Dientengevolge wordt het moeilijk om code te verspreiden, omdat bestaande variabelenamen kunnen worden overschreven. De mogelijke native oplossing zal zijn om modules of namespaces te implementeren. Dat kunnen ze dan zijn ingesloten in een blok door het toevoegen van de @gebruik richtlijn.
@module Site @var primary_color color # 292929; @var secondary_color kleur blauw; @mixin border-radius (radius length 3px) ... border-radius: 3px; / * Onjuist gebruik * / body kleur: var (primary_color); // Variable name is undefined / * Correct * / body @use Site; kleur: var (primary_color); // # 292929 (Works)
Zoals aan het begin van dit artikel is vermeld, bevindt de documentatie die hierboven wordt vermeld zich nog in de experimentele fase. Het is mogelijk - waarschijnlijk zelfs - dat de syntaxis zal veranderen, op basis van jouw feedback. Dus laten we het hebben. Is het idee van native variabelen in mixins in je CSS je opwindend ... of maakt je bang?
Me? Nou ik ben er wel voor. Ik denk dat de voorgestelde syntaxis een beetje werk zou kunnen gebruiken, want het zal ongetwijfeld de ontwerpers onder ons wegjagen. Dat gezegd hebbende, als de syntaxis een beetje vereenvoudigd was, ben ik 100% aan boord. En jij?
