Share
Webbutvecklingsgemenskapen har nyligen fått några stora nyheter. Medan ännu inte i nattklubbarna, är experimentationerna återigen på gång, vilket, om det lyckas, ger oss inbyggt stöd för CSS-variabler, mixins och moduler i webbläsare. Frågan är dock att det här är en bra sak?
Innan vi går framåt, kom ihåg att denna utveckling fortfarande bara är i försöksstadiet. De har inte implementerats i någon webbläsare än än.
Om du är blygsam bekant med CSS preprocessorer, som Mindre eller SASS, har du en grundläggande förståelse för vad du kan förvänta dig av dessa tillägg. (Det sagt är det föreslagna syntaxen tyvärr lite annorlunda.) I framtiden kommer du att kunna skapa variabler (globalt och lokalt) och mixins, som du kan tänka dig som en samling stylingar som lätt kan vara refererade.
Så länge jag kan komma ihåg, har gemenskapen blivit kollare för CSS-variabler. så vad var det? I ett ord: oenighet. Faktum är att webkit faktiskt tillbaka 2008 stod ihop med den här funktionen - till och med för att implementera den i nattklubbarna - men förslaget stannade inte långt efter. Många ansåg att morar CSS till en mer programmerare liknande Språket skulle bara introducera frustration; vissa tyckte även att det skulle kunna förvirra designers. Om till exempel den primära färgen i ditt projekt lagras i en variabel - förmodligen överst på ditt stilark - skulle det kräva att designern hänvisar till två platser.
@myColor: röd;
/ * Mindre syntax * / #someElem färg: @myColor;
Även om detta argument är giltigt i viss utsträckning, rymmer det inte mycket. De flesta designers underhåller en uppsättning site-färger längst upp i sitt stilark, som de använder som referens. Att presentera variabler för att innehålla dessa värden är en logisk lösning.
Mindre eller SASS-fans kommer att vara vana vid att definiera variabler som så:
/ * Mindre * / @primary_color: röd; / * SASS * / $ primary_color: röd;
Den föreslagna syntaxen komplicerar sakerna lite genom att skriva variabler. Till exempel:
/ * Deklaration * / @var primary_color färg röd; / * Användning * / kropp färg: var (primary_color);
Accentsconagua
@var Färg sökord i koden ovan. var funktion och passera i variabelnamnet. Jag måste erkänna: det verkar lite överflödigt att använda @var direktiv. Syntaxen som SASS och Mindre använder verkar mer lämplig och renare. @myVar är mer kortfattat än @var myVar.
Variabler är ett välkommet tillägg, å andra sidan.
Variabler skrivs. Varje primitiv värde typ, varje egendom och några extra bekvämlighetstyper finns. Detta låter oss avslöja de nya CSSOM-grejerna på dem:
document.styleSheets [0] .varsvars ['primary_color']. alpha = .5;
-- xanthir.com
Variabler kommer också att kunna scoped till en deklarationsbox via användningen av @lokal direktiv. Detta kan vara användbart när en variabel bara behöver användas en eller två gånger inom ett projekt.
.box / * Deklaration * / @local box_gradient bakgrund linjär gradient (topp, svart, vit); / * Användning * / bakgrund: var (box_gradient);
Mix-ins kan vara oerhört hjälpsamma. Faktum är att vi täckte processen med att skapa en klassfil med mix-ins för inte länge sedan på Nettuts +. Du kan läsa om det här - men kom ihåg att tekniken som presenteras i den artikeln är beroende av Mindre preprocessor. De nya experimenten använder igen en lite annorlunda syntax.
/ * Mindre * / .border-radien (@radius: 3px) -webkit-border-radius: @radius; -moz-gränsen-radien: @radius; gränsen: @radius; / * SASS * / @mixin gränsradie ($ radie: 3px) -webkit-border-radius: $ radius; -moz-gränsen-radie: $ radie; gränsradien: $ radie; / * Och möjligen den inhemska lösningen ?? * / @mixin gränsenradien (radielängd 3px) -webkit-gräns-radie: var (radie); -moz-gränsen-radie: var (radien); gränsen: var (radien);
Notera likheterna mellan SASS och den föreslagna nativa lösningen för mixins. Detta beror på det faktum att medlemmarna i SASS-teamet tjänar som rådgivare.
Som du kanske är medveten, tillåter Mindre och SASS dig bo selektorer. Detta kan drastiskt minska storleken på dina stylesheets, eftersom det avlägsnar behovet av samma väljare flera gånger.
/ * Det nuvarande sättet * / #content ... #content p ... #content pa ... #content pa: svävar ... / * Mindre och SASS * / #content ... p ... a ... & : sväva ... / * Och nativt ?? * / #content ... @this> p ... @this> en ... @this: svävar ...
Medan den föreslagna syntaxen är mer ordrik, Till sin kredit har den en trevlig OO-liknande syntax, vilket kommer att göra gott om utvecklare att känna sig riktigt hemma.
Men kom ihåg - inte alla designers är utvecklare.
Som standard i Mindre är alla variabler - för alla ändamål - globala. Som ett resultat blir det svårt att distribuera kod, eftersom befintliga variabla namn kan skrivas över. Den potentiella inhemska lösningen kommer att vara att implementera moduler eller namnområden. De kan då vara inkluderad i ett block genom att lägga till @använda sig av direktiv.
@module webbplats @var primary_color färg # 292929; @var secondary_color färg blå; @mixin gränsenradien (radielängd 3px) ... gränsradien: 3px; / * Felaktig användning * / body color: var (primary_color); // Variabelnamn är odefinierad / * Korrekt * / body @use Site; färg: var (primary_color); // # 292929 (Works)
Som noterats i början av denna artikel är dokumentationen som anges ovan fortfarande i försöksstadiet. Det är möjligt - troligen även - att syntaxen kommer att förändras, baserat på din återkoppling. Så låt oss få det. Tänker idén med inbyggda variabler i mixins i din CSS dig ... eller skrämma dig?
Mig? Jo jag är för det. Jag tror att det föreslagna syntaketet kan använda lite arbete, eftersom det utan tvivel kommer att skrämma bort designarna bland oss. Med det sagt, om syntaxen förenklades lite, är jag 100% ombord. Och du då?
