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 Bewerking waarmee webontwikkelaars kunnen bouwen modulaire, schaalbare en beter beheersbare CSS-stijlen.

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 door de eenvoudige hulpprogramma's, hulpprogramma's en opstellingen om u bij LESS te helpen aan de slag te gaan.

De 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

MINDER komt met een less.js bestand dat heel gemakkelijk in uw website kan worden geïmplementeerd. Maak een stylesheet met .minder extensie en link het in uw document met behulp van de rel = "stylesheet / lager" attribuut.

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

U bent er helemaal klaar voor en kunt stijlen samenstellen binnen de .minder. De LESS-syntaxis wordt meteen samengesteld terwijl de pagina wordt geladen. Onthoud dat het gebruik van JavaScript wordt afgeraden tijdens de productiefase, omdat dit de werking van de website ernstig zal beïnvloeden.

Je moet altijd de LESS-syntaxis van tevoren en alleen compileren dienen reguliere CSS in plaats daarvan. Je kunt gebruiken Terminal, een Task Runner zoals knorren of Slok, of een grafische toepassing om dit te doen.

CLI gebruiken

LESS biedt een native opdrachtregelinterface (CLI), lessc, die verschillende taken afhandelt 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 heb je de 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 opdracht elke keer dat we onze codes willen compileren, kunnen we een taakrunner installeren en instellen om wijzigingen in onze MINDER-bestanden te bekijken en LESS onmiddellijk compileren in CSS.

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 je workflow aanvult, ga ervoor.

De code-editor

U kunt elke code-editor gebruiken. Installeer 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 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 minder syntaxis.

MINDER syntaxis

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

Variabelen

Laten we eerst eens kijken naar de Variabelen.

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 moeten ziften duizend of meer soortgelijke fragmenten door het hele stylesheet heen. 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 gebruiken Variabelen. Met de variabelen kunnen we opslaan Een constante waarde die later kan worden hergebruikt 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 op # 2d5e8b in de @ Color-base variabel. 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 MINDER kunnen we gebruiken mixins om volledige declaraties te hergebruiken in een CSS-regel die is ingesteld in een andere regelset. Hier is een voorbeeld:

 .gradiënten 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-lineair verloop (bovenaan, #eaeaea, #cccccc);

In het bovenstaande fragment hebben we een standaardwaarde ingesteld helling kleur in de .gradiënten klasse. Wanneer we de verlopen willen toevoegen, voegen we eenvoudig de .gradiënten op deze manier:

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

De .doos zal alle aangifteblok erven binnen de .gradiënten. 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-lineair verloop (bovenaan, #eaeaea, #cccccc); rand: 1px vast # 555; grensradius: 3px;

Bovendien, als u CSS3 veel gebruikt op uw website, kunt u LESS Elements gebruiken om uw werk een stuk eenvoudiger te maken. LESS Elements is een verzameling van veelvoorkomende elementen CSS3 Mixins die we vaak kunnen gebruiken in stylesheets, zoals border-radius, gradiënten, drop-shadow enzovoorts.

Om LESS Elements te gebruiken, voegt u gewoon de @importeren regel in je LESS-stylesheet, maar vergeet niet om het eerst te downloaden en toe te voegen aan je werkdirectory.

 @import "elements.less";

We kunnen nu alle klassen geleverd door de elements.less, bijvoorbeeld om toe te voegen 3px grensradius naar a div, we kunnen 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: 40 px; 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 de “beste praktijken” beginsel.

In LESS CSS kunnen we de regelsets vereenvoudigen met nestelen van de onderliggende elementen in de ouders, als volgt;

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

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

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

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

Operatie

We kunnen ook bewerkingen uitvoeren in MINDER, zoals optellen, aftrekken, vermenigvuldigen en delen naar getallen, kleuren en variabelen in het 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 @hoogte variabele, wijs dan de waarde toe aan element A.

In element B, in plaats van zelf de hoogte te berekenen, we kunnen de hoogte met 2 vermenigvuldigen met behulp van de asterisk-operator (*). Nu, telkens wanneer we de waarde in de @hoogte veranderlijk, element B zal altijd twee keer de hoogte hebben.

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

strekking

LESS past de strekking concept, waarbij variabelen eerst van het lokale bereik worden geërfd en wanneer het lokaal niet 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, de hoofd heeft een zwart achtergrondkleur, maar navde achtergrondkleur zal zijn blauw omdat het de @color-variabele in zijn lokale scope heeft, terwijl de een heeft ook blauw dat is geërfd van de dichtstbijzijnde ouder, 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, zal het zeker een stuk eenvoudiger worden.

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 het volgende niveau te duwen.

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