Accentsconagua

CSS Preprocessors gebruiken met WordPress - Wat zijn ze?

Code
Share

Ik werk al drie jaar met WordPress, maar het duurde tot een jaar geleden dat ik serieus begon te werken aan de ontwikkeling van WordPress. In het bijzonder ben ik gepassioneerd door kinderthema's en besteed ik veel van mijn tijd aan het werken aan thema-ontwikkeling.

In de afgelopen paar jaar hebben we de opkomst van CSS-preprocessors gezien, voornamelijk tools die het schrijven van stylesheets vereenvoudigen en ze onderhoudbaarder maken..

In deze serie gaan we bekijken welke preprocessors er zijn, welke populaire beschikbaar zijn en hoe we ze kunnen integreren in onze thema-ontwikkeling..

Waar we naar toe gaan

Als het gaat om de ontwikkeling van gebruikersinterfaces, gaat het er niet alleen om hoe dingen er geweldig uit kunnen zien, maar het gaat er ook om dingen goed gestructureerd en zo performant mogelijk te maken, en ik geloof dat dit iets moet zijn dat door onze WordPress-projecten wordt doorgetrokken , ook.

In deze serie ben ik van plan wat achtergrondinformatie te geven over wat preprocessors zijn en enkele van de belangrijkste spelers in de ruimte te belichten. Ik zal ook praten over enkele van de meer populaire kaders. Ik ga dan verder naar een meer diepe duik in MINDER en leg uit waarom ik het liever gebruik. Ten slotte zal ik ingaan op het gebruik van CodeKit om uw CSS voor uw thema te compileren.

Over CSS Preprocessors

Zoals vermeld, zijn er een aantal CSS-preprocessors, waarvan de meest gebruikte MINDER en SASS zijn. Beide zijn syntactisch vergelijkbaar en kunnen de snelheid waarmee u uw CSS kunt schrijven drastisch verhogen.

Er zijn een paar verschillen, zoals hun compilers en uitbreidingen of frameworks waarmee ze kunnen worden gecombineerd.

MINDER

MINDER is een dynamische stijlbladtaal. U kunt uw CSS programmatisch schrijven in a .minder bestand en compileer je output in een .css het dossier. De compilatietaal voor LESS is JavaScript. Dit is geweldig, want u kunt de compiler op de server- of clientzijde uitvoeren.

Enkele van de kenmerken van LESS omvatten:

  • Variabelen - Variabelen kunnen worden gedefinieerd en worden overal in uw bestand gebruikt. Breng een wijziging aan op één plek en bekijk deze overal waar deze wordt gebruikt.
  • Mixins - Mixins bevatten een aantal eigenschappen van de ene regelset in een andere regelset. U kunt ook Parametrische Mixins gebruiken die argumenten accepteren.
  • Geneste regels - Geneste regels bieden u de mogelijkheid om nesten te gebruiken in plaats van of in combinatie met cascadering.
  • Namespaces: met naamruimten kunt u uw variabelen of mixins groeperen, voor organisatorische doeleinden, of gewoon om inkapseling aan te bieden.

Ik zal in de volgende post in deze serie meer in detail ingaan op de syntaxis hiervan.

Twee van de meer populaire front-end frameworks die LESS gebruiken zijn:

  • bootstrap
  • frameloze

SASS

SASS is een uitbreiding van CSS3. Het heeft twee syntaxes: .SCSS en .sass. .SCSS is de meest gebruikte syntaxis, maar het ondersteunt ook de oudere ingesprongen syntaxis.

Enkele kenmerken van SASS omvatten:

  • Variabelen - Variabelen kunnen worden gedefinieerd en worden overal in uw bestand gebruikt. Breng een wijziging aan op één plek en bekijk deze overal waar deze wordt gebruikt, zoals MINDER.
  • Mixins - Mixins staan ​​je toe om hele brokken CSS, eigenschappen of selectors zoals LESS opnieuw te gebruiken
  • Nesten - Vermijd herhaling door selectie van selectors in elkaar zoals MINDER
  • Overerving van selectiemogelijkheden: het kan aan één selector doorgeven dat alle stijlen van een ander worden overgenomen zonder dat de CSS-eigenschappen worden gekopieerd. Niet beschikbaar in MINDER.

Hier zijn een paar frameworks met SASS en SCSS:

  • fundament
  • Zwaartekracht
  • frameloze

Conclusie

CSS Preprocessors zijn absoluut een groeiende trend in webdesign. Ze kunnen de tijd die u besteedt aan schrijfstijlen voor uw sites drastisch versnellen.

Ze kunnen ook helpen bij het structureren van uw CSS zoals u zou doen in andere talen zoals PHP of JavaScript. Als u nog geen CSS-preprocessors gebruikt in uw webproject, moet u dit zeker overwegen.

Nu we twee van de meer populaire preprocessors hebben bekeken, ga ik dieper in op LESS en geef ik enkele redenen waarom ik er persoonlijk voor kies om het in de volgende post te gebruiken. Ik zal je ook laten zien hoe je moet beginnen met het gebruik van CodeKit met je WordPress-projecten.

Middelen

  • MINDER
  • SASS
Code
×