Share
In het eerste deel van deze serie gaf ik een snel overzicht van de populaire CSS-preprocessors LESS en SASS. Ik heb ook een paar van de kaders gedeeld waarin ze worden gebruikt.
Ik ben van plan om dieper in LESS in te duiken en te praten over de delen van de taal die ik het vaakst gebruik. Ik ben ook van plan je te laten zien hoe je ermee aan de slag kunt met CodeKit.
Laten we ingaan!
Persoonlijk gebruik ik MINDER voor de meeste WordPress-projecten. Ik besteed veel tijd aan het werken met Standard en het gebruikt Bootstrap als een raamwerk naar keuze.
Omdat Bootstrap LESS gebruikt voor het compileren van de CSS, heb ik geleerd hoe het te gebruiken .minder bestanden om wijzigingen aan te brengen. Ik ken andere webontwerpers en -ontwikkelaars die de voorkeur geven aan het gebruik van Foundation. Sinds Foundation SASS gebruikt, hebben ze geleerd om dat te gebruiken.
Ik ben persoonlijk begonnen aan een ander webproject dat SASS gebruikt, en het is relatief eenvoudig om dingen op te pakken vanwege mijn ervaring met MINDER.
Variabelen spreken voor zich. U kunt ergens in uw. Een variabele maken .minder bestand en verwijs het vervolgens naar andere plaatsen in dat bestand of naar andere bestanden. Ik gebruik het meestal voor kleuren, lettertypen, opvulling en marges.
Hier is een voorbeeld:
// Variabelen @red: # ff0000; @green: # 00ff00; @blue: # 0000ff; // Styling // Links a color: @blue; a: bezocht color: @blue;
Dat zal dan compileren:
een color: # 0000ff; a: bezocht color: # 0000ff;
Als u de kleur van beide linkstijlen wilt wijzigen, hoeft u alleen de variabele te wijzigen:
@blauw
van
# 0000FF
naar
# 0000a4
Je verandert op één plek, hercompileert en je hebt alle instanties van die variabele in het hele bestand veranderd.
Een andere geweldige manier om deze variabelen ook te gebruiken, zou zijn om meer semantische namen te gebruiken, zoals:
@primaire kleur
en
@secondaryColor
U kunt deze variabelen vervolgens overal in uw code gebruiken. Wanneer uw ontwerper met die kleuren komt, kunt u ze eenmalig wijzigen, opnieuw compileren en dan bent u klaar!
Nesten wordt gebruikt, net zoals je logica zou nesten in een if / else blokkeren in uw PHP of JavaScript: u stelt uw selector op hoger niveau in zoals .post, plaats vervolgens de andere selectors erin. Hiermee wordt voorkomen dat u herhaaldelijk moet typen .post voor je andere selectors zoals:
// Post .post opvulling: 20px; .post-header margin: 20px 0;
Dat zal dan compileren:
.post padding: 20px; .post .post-header margin: 20px 0;
Je kan ook gebruiken & om selectors samen te voegen. Een voorbeeld kan zijn als u specifieke widgets in uw zijbalk wilt targeten. Stel dat u de achtergrondkleur van Recente berichten en Recente opmerkingen-widgets anders wilt indelen. U kunt het volgende doen in MINDER:
.widget opvulling: 20px; & .widget_recent_entries background-color: white; & .widget_recent_comments background-color: black;
Dat zou hier compileren:
.widget opvulling: 20px; .widget.widget_recent_entries background-color: white; .widget.widget_recent_comments background-color: black;
Je kunt dit ook gebruiken voor pseudo-klassen zoals : hover, :actief, : visited, :voor, en :na.
// Links a color: blue; &: hover color: red; &: bezocht kleur: rood;
Dat zou hier compileren:
een kleur: blauw; a: hover color: red; a: bezocht color: red;
Mixins zijn in feite een aantal stijlattributen die u samen wilt groeperen. Een goed voorbeeld hiervan is voor attributen die verschillen tussen browsers zoals grensradius.
In plaats van ze allemaal te moeten onthouden, kunt u uw mixin bellen en krijgt u elk attribuut voor u. Hier is een voorbeeld:
// Mixin .border-radius grensradius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; // Widget .widget .border-radius;
Dat compileert naar het volgende:
.widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Wat als u meerdere keren de randstraal wilt gebruiken in uw .minder bestand maar wilde verschillende bedragen voor elk? Dat is wanneer je een parametrische mixin zou gebruiken.
Dit betekent simpelweg dat je een mixin opnieuw kunt gebruiken en een argument kunt doorgeven om te gebruiken. Hier is een voorbeeld:
// Mixin .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widget .widget .border-radius (); // Plaats .post .border-radius (8px);
Dat zou hier compileren:
.widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .post border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
Hier is een voorbeeld van het tegelijkertijd gebruiken van variabelen, nesten en mixins:
// Variables @ widget-recent-posts-border-radius: 4px; @ widget-recent-berichten-achtergrondkleur: wit; @ widget-recent-berichten-link-kleur: @blue; @ widget-recent-opmerkingen-grens-straal: 8px; @ widget-recent-opmerkingen-achtergrondkleur: zwart; @ widget-recent-reacties-link-kleur: @red; // Kleuren @blue: # 0000ff; @red: # ff0000; // Mixins .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widgets .widget & .widget_recent_entries background-color: @ widget-recent-berichten-achtergrondkleur; .border-radius (@ widget-recent-posts-border-radius); ul li a color: @ widget-recent-berichten-link-kleur; & .widget_recent_comments background-color: @ widget-recent-opmerkingen-achtergrondkleur; .border-radius (@ widget-recent-comments-border-radius); ul li a color: @ widget-recent-reacties-link-kleur;
Die zouden hier allemaal compileren:
.widget.wiget_recent_entries achtergrondkleur: wit; grensradius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .widget.widget_recent_entries ul li a color: # 0000ff; .widget.wiget_recent_comments background-color: black; grensradius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; .widget.widget_recent_entries ul li a color: # ff0000;
Het is heel eenvoudig om uw CodeKit-project in te stellen. U kunt eenvoudig uw map slepen en neerzetten in CodeKit, of u kunt linksonder op de plusknop klikken en vervolgens een map selecteren in de bestandsbrowser..
Zodra u dat doet, zal CodeKit automatisch alle bestanden in die map scannen en ze dan groeperen in de volgende categorieën:
Dus je hebt nu je projectbestanden geïmporteerd. Vervolgens gaan we het uitvoerpad van uw instellen .minder bestanden. Ik zou voorstellen om een css map en a minder map erin. U wilt ervoor zorgen dat al uw bestanden daarin staan minder map om naar uw te wijzen style.less het dossier.
U wilt overschakelen naar de weergave Stijlen. We willen de style.less bestand worden gecompileerd in de hoofdmap van uw thema als style.css. Om dit te doen, wil je met de rechtermuisknop klikken op de style.less bestand en selecteer "Stel het uitvoerpad in ... Dit zal een bestandsbrowser oproepen.
Vervolgens wilt u klikken in de uitvoerbestandsnaam en extensietekstinvoer. Zodra u dat doet, wordt het mogelijk automatisch ingevuld style.css voor jou. Als dit niet het geval is, wilt u zich aanmelden style.css. Ten slotte klikt u op kiezen opslaan.
We zijn er bijna! Vervolgens moeten we een compilatie-instelling selecteren. U zult zien dat het scherm met compilatie-instellingen zichtbaar wordt wanneer u op a klikt .minder het dossier. We hebben drie beschikbare uitvoerstijlen:
Selecteer een van bovenstaande en klik op "Compileren". U zou een notificatie moeten krijgen dat uw style.less bestand is gecompileerd.
Als al uw syntaxis correct is, zal uw compilatie succesvol zijn. Als er fouten zijn, wordt u naar de Log bekijk en geef je het regelnummer en uitleg van de fout.
Als alles correct compileert, zou je je kunnen openen style.css bestand en zie de uitvoer. Terwijl je je bewerkt .minder bestanden opslaan en opslaan, codeert CodeKit automatisch uw bestanden opnieuw.
Opmerking: zorg ervoor dat u geen wijzigingen aanbrengt in de style.css bestand, want zodra u uw compileert .minder bestanden, uw wijzigingen worden overschreven.
We hebben nu een diepere duik naar LESS doorgemaakt en een paar van de populaire functies uitgesplitst. Ik heb een paar redenen uitgelegd waarom ik persoonlijk ervoor kies om LESS te gebruiken in mijn WordPress-projecten en hoe ik CodeKit gebruik om al mijn bestanden te compileren.
In het volgende bericht zal ik meer in detail ingaan op hoe je je '.minder'bestanden en verbind ze allemaal samen.
Accentsconagua