CSS preprocessor: overzicht, keuze, applicatie

Absoluut, alle ervaren lay-out ontwerpers gebruiken preprocessors. Er zijn geen uitzonderingen. Als u deze activiteit wilt slagen, vergeet niet van deze programma's. Op het eerste gezicht kunnen ze een beginner rustige horror veroorzaken - het is te veel als programmering! In feite kun je alle mogelijkheden van de CSS preprocessors in ongeveer een dag begrijpen, en als je het probeert, dan voor een paar uur. In de toekomst zullen ze je leven aanzienlijk vereenvoudigen.

Hoe CSS preprocessors verschenen

Om de eigenschappen van deze technologie beter te begrijpen, dompel ons kort in de geschiedenis van de ontwikkeling van visuele weergave van webpagina's.

Toen de massa internet applicatie pas aan het begin was, waren er geen style sheets. Het ontwerp van documenten hangt uitsluitend af van browsers. Elk van hen had zijn eigen stijlen, die gebruikt werden om bepaalde tags te verwerken. Bijgevolg lijken de pagina's verschillend, afhankelijk van welke browser u ze hebt geopend. Het resultaat is chaos, verwarring, problemen voor ontwikkelaars.

In 1994 ontwikkelde de Noorse wetenschapper Haakon Lee een stijlblad dat gebruikt kan worden om het uiterlijk van de pagina afzonderlijk van het HTML-document te ontwerpen. Het idee werd uitgenodigd voor vertegenwoordigers van het W3C consortium, die onmiddellijk erop ging werken. Enkele jaren later werd de eerste versie van de CSS-specificatie gepubliceerd. Dan werd het voortdurend verbeterd, verbeterd ... Maar het concept bleef hetzelfde: elke stijl kreeg bepaalde eigenschappen.

Het gebruik van CSS tabellen heeft altijd problemen veroorzaakt. Bijvoorbeeld, coder had vaak moeite met het sorteren en groeperen van eigenschappen, en erfenis is niet zo simpel.

En dan kwamen de tweeduizendste. De professionele front-line ontwikkelaars beginnen vaker op te stellen, waarvoor flexibel en dynamisch werk met stijlen belangrijk was. De CSS die destijds bestond, vereist voorvoegsel en bijhouden van ondersteuning voor nieuwe browserfuncties. Vervolgens kwamen de experts van JavaScript en Ruby naar het bedrijfsleven, waardoor preprocessors - add-ons voor CSS werden toegevoegd, waardoor er nieuwe functies werden toegevoegd.

CSS voor beginners: eigenschappen van preprocessors

Zij verrichten verschillende functies:

• Unify browser voorvoegsels en hacks;

• Vereenvoudig de syntaxis;

• Laat werken met geneste selectors zonder fouten toe;

• Verbeter de logica van styling.

Kortom: de preprocessor voegt programmeringslogica toe aan CSS-mogelijkheden. Nu wordt de styling niet uitgevoerd door de gebruikelijke opsomming van stijlen, maar met behulp van enkele eenvoudige trucs en benaderingen: variabelen, functies, myxinen, cycli, condities. Daarnaast werd het mogelijk om wiskunde te gebruiken.

Door de populariteit van dergelijke invoegtoepassingen te zien, begon de W3C geleidelijk aan functies van hen toe te voegen aan de CSS-code. Bijvoorbeeld, de calc () functie verscheen in de specificatie, die wordt ondersteund door veel browsers. Er wordt verwacht dat binnenkort het mogelijk zijn om variabelen vast te stellen en myxinen te creëren. Dit gebeurt echter in de verre toekomst, en preprocessors zijn hier al en werken al perfect.

Populaire CSS preprocessors. Sass

Het is in 2007 ontwikkeld. Het was oorspronkelijk een onderdeel van Haml, de HTML template engine. Nieuwe kenmerken voor het beheren van CSS-elementen komen tot de smaak van ontwikkelaars op Ruby on Rails, die het overal verspreiden. In Sass verscheen een groot aantal kansen die nu in een preprocessor zijn opgenomen: variabelen, embedding selectors, mixins (je zou er echter geen argumenten kunnen toevoegen).

Verklarende variabelen in Sass

Variabelen worden verklaard met behulp van het $ teken. In hen kunt u eigenschappen en hun sets opslaan, bijvoorbeeld: "$ borderSolid: 1px solid red;". In dit voorbeeld verklaarde we een variabele genaamd borderSolid en stelde de waarde 1px helder rood in. Nu, als in CSS we een rode rand moeten maken met een breedte van 1px, specificeert u deze variabele na de naam van het object. Na de verklaring kunnen de variabelen niet worden gewijzigd. Er zijn verschillende ingebouwde functies beschikbaar. Verklaar bijvoorbeeld een variabele $ redColor met de waarde # FF5050. Nu, in de CSS, in de eigenschappen van een element, gebruiken we het om de lettertype kleur te zetten: p {color: $ redColor; }. Wil je met kleur experimenteren? Gebruik de functies donkerder of verlicht. Dit doet dit als volgt: p {kleur: donkerder ($ redColor, 20%); }. Als gevolg daarvan zal de kleur van redColor 20% lichter zijn.

Sass heeft veel ingebouwde functies. Wij raden u aan om hen tenminste beter te leren kennen en beter te leren.

nesting

Vroeger, om nesting te noemen, moesten we lange en ongemakkelijke ontwerpen gebruiken. Stel je voor dat we een div hebben waarin p ligt, en daarbij is weer spanning. Voor div moeten we de lettertypekleur naar rood instellen, voor p-geel, voor span-roze. In gewone CSS zou dit als volgt gebeuren:

Div {

Kleur: rood;

}

Div p {

Kleur: geel;

}

Div p span {

Kleur: Roze;

}

Met de CSS preprocessor wordt alles makkelijker en compacter gemaakt:

Div {

Kleur: rood;

P {

Kleur: geel;

.span {

Kleur: Roze;

}

}

}

Elementen worden letterlijk in een ander gezet.

Preprocessor richtlijnen

Met de @import-richtlijn kunt u bestanden importeren. Bijvoorbeeld, we hebben een bestand genaamd fonts.sass, waarin stijlen voor lettertypes worden aangegeven. We verbinden het met het hoofd style.sass bestand: @import 'lettertypen'. Klaar! In plaats van een groot bestand met stijlen, hebben we meerdere die u kunt gebruiken om snel en gemakkelijk toegang te krijgen tot de vereiste eigenschappen.

slijmprik

Een van de meest interessante zadumokjes. Het staat in staat om één set eigenschappen te specificeren in één regel. Werk als volgt:

@mixin bigFont {

Font-familie: 'Times New Roman';

Lettergrootte: 64px;

Lijnhoogte: 80px;

Lettertype: vet;

}

Als u een mixin wilt toepassen op een element op een pagina, gebruik dan de @include richtlijn. Bijvoorbeeld, we willen het toepassen op de h1-koptekst. De volgende constructie wordt verkregen: h1 {@include: largeFont; }

Alle eigenschappen van de mixin worden toegewezen aan het element h1.

Minder Preprocessor

De Sass-syntax doet denken aan programmering. Als u op zoek bent naar een optie die meer geschikt is voor studenten die CSS leren voor beginners, let op Minder. Het is opgericht in 2009. Het belangrijkste kenmerk is de ondersteuning van de native CSS-syntax, dus het is makkelijker om het te leren kennen met vreemden die niet bekend zijn met de programmering van de coder.

Variabelen worden aangegeven met het @ symbool. Bijvoorbeeld: @fontSize: 14px;. Nesting werkt volgens dezelfde principes als in Sass. Mixins worden als volgt verklaard: .largeFont () {font-family: 'Times New Roman'; Lettergrootte: 64px; Lijnhoogte: 80px; Lettertype: vet; }. Voor aansluiting hoeft u geen preprocessor richtlijnen te gebruiken - voeg een nieuwe mixin toe aan de eigenschappen van het geselecteerde element. Bijvoorbeeld: h1 {.largeFont; }.

schrijfstift

Een andere preprocessor. Gemaakt in 2011 door dezelfde auteur die de wereld Jade, Express en andere bruikbare producten gaf.

Variabelen kunnen op twee manieren worden aangegeven - expliciet of impliciet. Bijvoorbeeld: font = 'Times New Roman'; Is een impliciete optie. Maar $ font = 'Times New Roman' - expliciet. Mixins worden impliciet verklaard en verbonden. De syntaxis is: redColor () kleur rood. Nu kunnen we het toevoegen aan het element, bijvoorbeeld: h1 redColor ();.

Op het eerste gezicht kan Stylus onbegrijpelijk lijken. Waar zijn de "inheemse" haakjes en halfkolommen? Maar als je er gewoon in duikt, wordt alles veel duidelijker. Onthoud echter dat een lange ontwikkeling met deze preprocessor u kan "spenen" om de klassieke CSS-syntax te gebruiken. Dit veroorzaakt soms problemen als u met "schone" stijlen moet werken.

Welke voorprocessor moet ik kiezen?

In feite maakt het er niet toe. Alle opties bieden ongeveer dezelfde mogelijkheden, maar de syntaxis van elk is anders. We raden u aan om als volgt te gaan:

• Als u een programmeur bent en wilt werken met stijlen als code, gebruik dan Sass;
• Als u een lay-out ontwerper bent en wilt werken met stijlen zoals bij de gebruikelijke lay-out, let op Minder;
• Als u van minimalisme houdt, gebruik dan Stylus.

Voor alle opties is een groot aantal interessante bibliotheken beschikbaar die de ontwikkeling verder vereenvoudigen. Gebruikers van Sass worden geadviseerd om aandacht te besteden aan Compass - een krachtig gereedschap met veel ingebouwde functies. Bijvoorbeeld, nadat u het hebt geïnstalleerd, hoeft u zich nooit zorgen te maken over leveranciersvoorvoegsels. Eenvoudiger werken met rasters. Er zijn voorzieningen om te werken met kleuren, sprites. Een aantal reeds verklaarde myxinen zijn beschikbaar. Geef dit gereedschap een paar dagen, waardoor u veel tijd en energie in de toekomst bespaart.