MINDER CSS - Beginnersgids

CSS Pre-processor is nu een nietje geworden in webontwikkeling. Het verzendt gewone CSS met programmeerkenmerken zoals Variabelen, Functies of Mixin en Bewerkingen waarmee webontwikkelaars modulaire, schaalbare en beter hanteerbare CSS-stijlen kunnen bouwen .

In deze post gaan we in op LESS wat een van de meest populaire CSS Pre-processors in de buurt is geweest, en het is ook op grote schaal ingezet in tal van front-end frameworks zoals Bootstrap. We zullen ook de standaardhulpprogramma 's, hulpprogramma's en setups doorlopen om u bij LESS te helpen aan de slag te gaan .

The Compiler

Om te beginnen moeten we een compiler instellen. MINDER syntaxis is niet-standaard, per W3C-specificatie. De browser zou de uitvoer niet kunnen verwerken en renderen, ondanks overervende eigenschappen die lijken op CSS.

Hier is een glimp op LESS-code:

 @ color-base: # 2d5e8b; .class1 {achtergrondkleur: @ color-base; .class2 {background-colour: #fff; kleur: @ color-base; }} 

De compiler verwerkt de code en zet de LESS-syntaxis om in CSS-indeling die aan de browser voldoet:

 .class1 {background-colour: # 2d5e8b; } .class1 .class2 {background-color: #fff; kleur: # 2d5e8b; } 

Er zijn een aantal hulpmiddelen voor het compileren van CSS:

JavaScript gebruiken

LESS wordt geleverd met een less.js bestand dat heel gemakkelijk in uw website kan worden geïmplementeerd. Maak een stylesheet met de .less extensie en koppel deze aan uw document met behulp van het kenmerk rel="stylesheet/less" .

U kunt het JS-bestand hier downloaden, het downloaden via Bower-pakketbeheer, anders rechtstreeks een link naar CDN maken, zoals zo:

Je bent er helemaal klaar voor en kunt stijlen samenstellen binnen het .less . De LESS-syntaxis wordt meteen gecompileerd terwijl de pagina wordt geladen. Houd er rekening mee dat het gebruik van JavaScript wordt afgeraden in de productiefase, omdat dit de prestaties van de website ernstig zal beïnvloeden .

Je moet altijd eerst de LESS-syntaxis compileren en alleen gewone CSS gebruiken. U kunt Terminal, een Task Runner zoals Grunt of Gulp, of een grafische toepassing gebruiken om dit te doen.

CLI gebruiken

LESS biedt een native opdrachtregelinterface (CLI), lessc, die verschillende taken lessc die verder gaan dan alleen de LESS-syntaxis. Met behulp van de CLI kunnen we de codes verwennen, de bestanden comprimeren en een bronkaart maken. De opdracht is gebaseerd op Node.js waarmee de opdracht effectief kan worden gebruikt voor Windows, OS X en Linux.

Zorg ervoor dat Node.js is geïnstalleerd (pak anders het installatieprogramma hier) en installeer vervolgens LESS CLI via NPM (Node Package Manager) met behulp van de volgende opdrachtregel.

 npm install -g minder 

Nu hebt u het lessc commando tot uw beschikking om LESS samen te stellen in CSS:

 lessc style.less style.css 

Task Runner gebruiken

Task runner is een tool die ontwikkeltaken en workflows automatiseert. In plaats van het lessc commando uit te voeren telkens als we onze codes willen compileren, kunnen we een lessc installeren en instellen om wijzigingen in onze MINDER-bestanden te bekijken en LESS onmiddellijk in CSS te compileren.

Twee populaire tools in deze categorie vandaag zijn Grunt en Gulp. We hebben een reeks berichten over deze hulpmiddelen. Bekijk de posts om te leren hoe u deze tools in uw workflow kunt implementeren.

• Hoe grunt te gebruiken om uw workflow te automatiseren
• Aan de slag met Gulp.js
• The Battle Of Build Scripts: Gulp versus grunt

Grafische applicatie gebruiken

Voor degenen die misschien niet gewend zijn om Terminal- en opdrachtregels te gebruiken, kunnen ze in plaats daarvan kiezen voor een grafische interface. Er zijn een overvloed aan applicaties om LESS vandaag te compileren voor alle platforms - sommige gratis, sommige betaald

Hier is de volledige lijst:

App	Platform	Kosten
Mengsel	OS X / Windows	Gratis
Koala	OS X / Windows / Linux	Gratis
Prepros	OS X / Windows	Freemium (USD29)
puntloos	ramen	Gratis
CodeKit	OS X	USD32

Welke compiler je kiest (afgezien van JavaScript) maakt eigenlijk niet zoveel uit, zolang de tool maar werkt en een aanvulling is op je workflow, ga ervoor.

De code-editor

U kunt elke code-editor gebruiken. Installeer gewoon een plug-in of een extensie om de LESS-syntaxis met de juiste kleuren te markeren, een functie die nu beschikbaar is voor bijna alle code-editors en IDE's, inclusief SublimeText, Notepad ++, VisualStudio, TextMate en Eclipse om er maar een paar te noemen.

Nu we de compiler en de code-editor volledig hebben ingesteld, kunnen we beginnen met het schrijven van CSS-stijlen met LESS-syntaxis.

MINDER syntaxis

Anders dan gewone CSS zoals wij die kennen, werkt LESS veel meer als een programmeertaal. Het is dynamisch, dus verwacht onderweg een aantal terminologieën te vinden zoals Variables, Operation en Scope .

Variabelen

Laten we eerst eens naar de variabelen kijken .

Als je al een tijdje met CSS hebt gewerkt, heb je waarschijnlijk zoiets geschreven, waarbij we herhalende waarden hebben toegewezen in declaratieblokken in het hele stylesheet.

 .class1 {background-colour: # 2d5e8b; } .class2 {background-color: #fff; kleur: # 2d5e8b; } .class3 {border: 1px solid # 2d5e8b; } 

Deze oefening is in feite prima - totdat we merken dat we meer dan duizend of meer soortgelijke fragmenten door het stylesheet moeten doorzoeken. Dit kan gebeuren bij het bouwen van een grootschalige website. Het werk zal vervelend worden.

Als we een CSS-pre-processor zoals LESS gebruiken, zou het bovenstaande exemplaar geen probleem zijn - we kunnen variabelen gebruiken . Met de variabelen kunnen we een constante waarde opslaan die later opnieuw kan worden gebruikt in het hele stylesheet.

 @ color-base: # 2d5e8b; .class1 {achtergrondkleur: @ color-base; } .class2 {background-color: #fff; kleur: @ color-base; } .class3 {border: 1px solid @ color-base; } 

In het bovenstaande voorbeeld slaan we de kleur #2d5e8b in de variabele @color-base . Als u de kleur wilt wijzigen, hoeven we alleen de waarde in deze variabele te wijzigen.

Afgezien van kleur, kunt u ook andere waarden in de variabelen opnemen, bijvoorbeeld:

 @ font-family: Georgia @ dot-border: stippellijn @transition: linear @opacity: 0.5 

mixins

In LESS kunnen we Mixins gebruiken om hele declaraties opnieuw te gebruiken in een CSS-regel die is ingesteld in een andere regelset. Hier is een voorbeeld:

 .gradients {background: #eaeaea; achtergrond: lineair verloop (top, #eaeaea, #cccccc); achtergrond: -o-lineaire gradiënt (top, #eaeaea, #cccccc); achtergrond: -ms-linear-gradient (top, #eaeaea, #cccccc); achtergrond: -moz-linear-gradient (top, #eaeaea, #cccccc); achtergrond: -webkit-linear-gradient (top, #eaeaea, #cccccc); } 

In het bovenstaande fragment hebben we een standaardgradiëntkleur ingesteld in de klasse .gradients . Wanneer we de verlopen willen toevoegen, voegen we eenvoudig de .gradients :

 div {.gradients; rand: 1px vast # 555; grensradius: 3px; } 

De .box neemt alle declaratieblokken in de .gradients . De bovenstaande CSS-regel is dus gelijk aan de volgende gewone CSS:

 div {background: #eaeaea; achtergrond: lineair verloop (top, #eaeaea, #cccccc); achtergrond: -o-lineaire gradiënt (top, #eaeaea, #cccccc); achtergrond: -ms-linear-gradient (top, #eaeaea, #cccccc); achtergrond: -moz-linear-gradient (top, #eaeaea, #cccccc); achtergrond: -webkit-linear-gradient (top, #eaeaea, #cccccc); rand: 1px vast # 555; grensradius: 3px; } 

Bovendien, als u veel CSS3 gebruikt op uw website, kunt u LESS Elements gebruiken om uw taak veel gemakkelijker te maken. LESS Elements is een verzameling gemeenschappelijke CSS3-mixins die we vaak in stylesheets kunnen gebruiken, zoals grensradius, gradients, drop-shadow enzovoort.

Om LESS Elements te gebruiken, voegt u gewoon de @import regel toe aan uw LESS-stylesheet, maar vergeet niet om deze eerst te downloaden en toe te voegen aan uw werkdirectory.

 @import "elements.less"; 

We kunnen nu alle klassen van de elements.less hergebruiken. 3px grens van 3px aan een div toe te voegen, kunnen we schrijven:

 div {.rounded (3px); } 

Voor verder gebruik, raadpleeg de officiële documentatie.

Geneste regels

Wanneer u stijlen in platte CSS schrijft, bent u mogelijk ook door deze typische codestructuren gekomen.

 nav {height: 40px; breedte: 100%; achtergrond: # 455868; border-bottom: 2px solid # 283744; } nav li {width: 600px; hoogte: 40px; } nav li a {color: #fff; regelhoogte: 40px; tekstschaduw: 1px 1px 0px # 283744; } 

In gewone CSS selecteren we onderliggende elementen door eerst de ouder in elke regelset te targeten, wat aanzienlijk overbodig is als we het principe van 'best practices' volgen.

In LESS CSS kunnen we de regelsets vereenvoudigen door de onderliggende elementen binnen de ouders te nesten, en wel als volgt;

 nav {height: 40px; breedte: 100%; achtergrond: # 455868; border-bottom: 2px solid # 283744; li {breedte: 600px; hoogte: 40px; een {color: #fff; regelhoogte: 40px; tekstschaduw: 1px 1px 0px # 283744; }}} 

U kunt ook pseudo-klassen, zoals :hover, toewijzen aan de selector met het ampersand-symbool (&).

Laten we zeggen dat we willen toevoegen :hover naar de ankertag hierboven, we kunnen het op deze manier schrijven:

 een {color: #fff; regelhoogte: 40px; tekstschaduw: 1px 1px 0px # 283744; &: hover {background-colour: # 000; kleur: #fff; }} 

Operatie

We kunnen ook bewerkingen in MINDER uitvoeren, zoals optellen, aftrekken, vermenigvuldigen en delen naar getallen, kleuren en variabelen in de stylesheet.

Laten we zeggen dat we element B twee keer zo hoog willen hebben als element A. In dat geval kunnen we het op deze manier schrijven:

 @hoogte: 100 px .element-A {hoogte: @hoogte; } .element-B {height: @height * 2; } 

Zoals je hierboven kunt zien, slaan we eerst de waarde op in de variabele @height en dan de waarde aan element A.

In element B, in plaats van zelf de hoogte te berekenen, kunnen we de hoogte met 2 vermenigvuldigen met behulp van de asterisk-operator (*). Wanneer we de waarde in de variabele @height, heeft element B altijd twee keer de hoogte.

Bekijk meer geavanceerde bedieningsvoorbeelden in onze vorige tutorial: Een gladde menubedieningsbalk ontwerpen.

strekking

LESS past het Scope- concept toe, waarbij variabelen eerst van het lokale bereik worden geërfd en wanneer het lokaal niet lokaal beschikbaar is, zal het een breder bereik doorzoeken.

 koptekst {@color: zwart; achtergrondkleur: @color; nav {@color: blauw; achtergrondkleur: @color; een {color: @color; }}} 

In het bovenstaande voorbeeld heeft de header een zwarte achtergrondkleur, maar de achtergrondkleur van nav is blauw omdat deze de @color-variabele in het lokale bereik heeft, terwijl a ook blauw heeft overgenomen van het dichtstbijzijnde bovenliggende element, nav .

Laatste gedachte

Uiteindelijk hopen we dat dit bericht u een basiskennis kan geven over hoe we CSS op een betere manier kunnen schrijven met LESS. Misschien voel je je in het begin een beetje ongemakkelijk, maar als je het vaker probeert, wordt het zeker een stuk eenvoudiger.

Hier zijn een paar tutorials die ik u aanmoedig om naar verdere tips en praktijken te zoeken, die u kunnen helpen om uw MINDER vaardigheid naar een hoger niveau te tillen.

• MINDER CSS-zelfstudie: een gladde navigatieknop voor het menu ontwerpen
• Inzicht in MINDER kleurenfuncties
• 3 Nieuwe MINDER CSS-functies die u moet kennen