Share
Het gebruik van preprocessors zoals Sass, LESS en Stylus heeft ontwikkelaars altijd meer controle gegeven over hun stylesheets, maar native CSS sluit geleidelijk aan de kloof. CSS-functies zoals variabelen, calc en mixins vormen slechts het topje van de ijsberg; Laten we eens kijken wat preprocessors ons op dit moment helpen, en hoe native CSS-logica de manier waarop we dingen gaan doen, zal veranderen.
Afbeelding van Brother-lettertype op Envato ElementsTaalabstracties zoals Sass, LESS en Stylus hebben de werelden van ontwikkelaars opgeblazen door ze variabelen, mixins, functies, uitbreidingen en nog veel meer te bieden. Deze preprocessors vulden ontbrekende functies in die CSS niet kon bieden.
CSS moet echter niet langer worden beschouwd als 'logisch-minder' zonder de aanwezigheid van intellect. Met CSS in beweging om zichzelf te verfijnen, vangen we al een glimp van de toekomst op - een toekomst die zal concurreren met preprocessors.
Meestal associëren we "mixins" met preprocessors, groepen CSS-verklaringen die u gedurende een project opnieuw kunt gebruiken. Een mixin kan worden gebruikt als een stand-alone helper, of u kunt waarden doorgeven als argumenten om het extra flexibel te maken.
Dit is een Sass @mixin voorbeeld genoemd lettertypegrootte.
@mixin font-size ($ size, $ base) font-size: $ size; // fallback voor oude browsers lettertypegrootte: ($ size / $ base) * 1rem;
De bovenstaande mixin accepteert argumenten voor $ size en $ base, en het wordt gebruikt in een @include verklaring met de mogelijkheid om argumenten aan te passen afhankelijk van de context.
/ * Sass Call * / body @include font-size (14, 16); / * CSS-uitvoer * / body font-size: 14px; font-size: 0.875rem;
Het resultaat is een rem op basis van waarde voor lettertypegrootte met een px terugval voor browsers die geen ondersteuning bieden rem. Preprocessor-mixins zoals deze hebben ontwikkelaars talloze uren bespaard door de jaren heen.
Native CSS-mixins zijn momenteel een concept van een redactie, maar hebben ook een werkende implementatie in Chrome. Als je al met CSS-variabelen hebt gespeeld, ziet het volgende fragment er heel bekend uit.
: root --pink-theme: background: # F64778;
Pas op dat de bovenstaande code je syntaxismarkeerstift zeker tot waanzin zal maken. Deze manier van schrijven van een CSS-mixin maakt gebruik van een nieuwe at-rule genaamd @van toepassing zijn, vergelijkbaar met wat we in Sass kennen als @include.
body @apply --pink-thema;
Net zoals we bekend zijn met het gebruik van Sass @include, we zouden uiteindelijk kunnen hebben @van toepassing zijn voor CSS!
U kunt dit experiment zelf proberen in Chrome door een vlag onder te schakelen chrome: // flags / # enable-experimentele-web-platform-features.
Weet je nog toen preprocessors de enige stijltools waren die in staat waren tot wiskundige gymnastiek? Nou, dat is niet meer het geval. Met calc (), we kunnen die vervelende cijfers nemen en ze muteren in nieuwe waarden op basis van uw gewenste rekenkunde.
nav margin: calc (1rem - 2px) calc (1rem - 1px);
Dit is de schoonheid van calc (); het breidt eindelijk CSS-krachten uit in de stratosfeer. Liever toevoeging? Aftrekken? Divisie? Vermenigvuldiging? Calc kan dat allemaal en meer aan.
Als je meer wilt lezen over calc (), de W3C-specificatie heeft alles wat je nodig hebt om je tegelijkertijd slaperig en gelukkig te maken. Browserondersteuning is ook zeer solide, volgens Can I Use.
Native variabelen voor CSS zijn eindelijk hier. Ze zijn een echte en tastbare optie voor ontwikkelaars, hoewel het enige tijd kostte om te leren van preprocessors.
Hier ziet u de variabele syntaxis van Sass op de volgende manier:
$ spacing-unit: 20px; main margin: $ spacing-unit; opvulling: $ spacing-unit;
Sass-variabelen worden aangegeven met een dollar $ teken, maar in CSS zien ze er een beetje anders uit:
: root - primaire kleur: hemelsblauw; nav.primary background: var (- primaire kleur);
CSS-variabelen worden aangegeven met een dubbel koppelteken -- en worden meestal binnen geplaatst :wortel voor wereldwijde toegang, hoewel hun reikwijdte kan worden aangescherpt door ze in specifieke selectorverklaringen op te nemen.
div color: var (- my-var, red);
Variabelen kunnen zelfs een terugvalwaarde accepteren als ze nog niet zijn gedefinieerd, zoals het geval is met het bovenstaande voorbeeld. Browserondersteuning is ook niet slecht, omdat Edge gedeeltelijke ondersteuning biedt. De specificatie bevindt zich ook in de kandidaat-aanbevelingsfase voor uw leesplezier.
Nesten is een functie in veel preprocessors waarmee u selectors kunt plaatsen binnen een bestaande verklaring. Meestal ziet het nesten in Sass er ongeveer zo uit:
ul margin: 20px auto; li font-size: 12px; een text-decoration: none;
Nesten kan onpraktisch worden en je in een hoop problemen laten verwikkelen, wat resulteert in onmogelijk lange selectieketens. Om deze reden is het raadzaam om vast te houden aan de Inception Rule en te blijven nestelen tot niet meer dan drie of vier niveaus diep.
Hoewel nestelen gevaarlijk kan zijn, kan het ook handig zijn als je de tijd neemt om opmerkzaam te zijn. Hier is een voorproefje van hoe het uiteindelijk zou kunnen zoeken naar native CSS:
/ * CSS Nesting * / nav color: # 222; & .primary background: maroon; / * Resultaat * / nav color: # 222; nav.primary background: maroon;
Net zoals we gewend zijn van onze preprocessor-bondgenoten, biedt native CSS-nesten ons dezelfde principes, maar dan zonder de noodzaak om de taal te compileren. Er is een ontwerpspecificatie van Tab Atkins over deze functie voor Native CSS-nesten.
"Uitbreidingen" zijn een andere manier om eigenschappen en waarden door te geven en ze te delen tussen aangiften. In Sass zijn we gewend geraakt aan het toepassen van de volgende syntaxis:
.message border: 1px solid #ccc; opvulling: 10px; kleur: # 333; .succes @extend .message; randkleur: groen; .error @extend .message; randkleur: rood; .waarschuwing @extend. bericht; randkleur: geel;
Je kunt zien dat we beginnen met het definiëren van stijlen voor .bericht, en bied dan drie varianten aan met verschillende border-kleuren. Elke variant eerst strekt .bericht, daarbij alle stijlregels overerven, voordat de randkleur verandert.
Identieke syntaxis van het bovenstaande voorbeeld is wat wordt opgesteld door Tab Atkins als een andere potentiële specificatie voor native CSS. Of je het nu wel of niet eens bent met de uitbreiding (een functie waarvan de voordelen ten volle worden besproken), het is geweldig om te zien dat CSS-verzorgers ideeën omarmen die zijn voortgebracht door preprocessors.
Als u ooit merkt dat u de kleurmanipulatiefuncties van de preprocessor gebruikt, zult u deze functionaliteit waarderen in native CSS. De functie color-mod () neemt een bestaande kleur en past nul of meer "color adjusters" toe die bepalen hoe het eindresultaat te manipuleren.
nav background: color-mod (# 79d3e2 hue (360) saturation (100%));
De ontwikkeling bevindt zich in het beginstadium en hoewel er polyfills beschikbaar zijn, verandert de syntaxis regelmatig (de huidige kleur-mod was kleur, bijvoorbeeld).
Tyler Gaw heeft een heel leuk hulpmiddel gemaakt (colorme.io) waarmee je kunt experimenteren met alle beschikbare kleurregelaars.
colorme.ioSpec voor de functie color-mod () bevindt zich momenteel in de conceptmodus via de CSS-werkgroep.
Op dezelfde manier dat jQuery hielp bij het verbeteren van het web, dus inderdaad preprocessors hebben als het gaat om CSS. Talen zoals Sass hebben de weg geëffend voor nieuwe ideeën en benaderingen die nog niet in overweging zijn genomen door de auteurs van de CSS-spec.
Ik hoop dat de nieuwe functies die we hebben besproken u inspireren om ze in uw eigen werk te gebruiken; Ik raad u aan om, indien mogelijk, gebruik te maken van native functionaliteit via een preprocessor!
Accentsconagua