Categorieën
Magento

Stabiele basis met Magento 2 en SCSS

CSS vormt samen met html de basis van de voorkant van je Magento Enterprise shop en met de komst van Magento 2 is het gebruik van een CSS Preprocessor onvermijdelijk. Een CSS Preprocessor is een techniek die het managen van CSS bestanden gemakkelijker maakt door middel van het gebruik van bijvoorbeeld nesting, variabelen, mixins en functies. De drie bekendste Pre-processors zijn SASS, LESS en Stylus. Op de eerste twee gaan we in combinatie met de implementatie van Magento 2 dieper op in. Hierin wordt voor SASS de verbeterde versie SCSS aangehouden.

SCSS is tegenover LESS een krachtige pre-processor doordat er complexere constructies mogelijk zijn en de syntax ervan een stuk eenvoudiger is. Zo worden in bijvoorbeeld mixins waarin media-queries worden gedefinieerd in SCSS slechts gebruik gemaakt van 1 variabele in een mixin, waar dat in LESS op een meer ‘programmatische’ manier gebeurd. Zo zijn er veel meer voorbeelden te noemen die de code een stuk overzichtelijker maakt.

Voorbeeld:
LESS
.media-width(@extremum, @break) when (@extremum = ‘max’) and (@break = @screen__s) { }

SCSS
@include max-screen($screen__s) { }

Waarom heeft Magento er dan toch voor gekozen om LESS als standaard Pre-processor te integreren? Het antwoord hierop is eigenlijk vrij eenvoudig:

At the time we had to commit to a technology, there were several stable LESS pre-processors available in PHP, but no (stable) PHP implementations for SASS.”
Alan Kent

Tijdens het ontwikkelen van het nieuwe platform was er simpelweg nog geen stabiele SASS preprocessor beschikbaar voor PHP. Dit is alleen al lang niet meer het geval en dit was voor ons ook de reden om naar de mogelijkheden te kijken hoe we SCSS konden implementeren in Magento 2. Tijdens de eerste hackathon die we als Guapa bijwoonden over Magento 2 kwamen we hierdoor in aanraking met de SCSS blank theme die is ontwikkeld door Snow.Dog ( https://snow.dog/ ). Zij hebben de LESS core van Magento omgezet in SCSS en deze voor de community beschikbaar gesteld op packagist. Samen met een pakket genaamd ‘frontools’, die de basis vormt voor het verwerken van de .scss bestanden, vormde SCSS de nieuwe basis voor onze projecten.

De basis build script voor frontools, die benodigd is om je .scss bestanden te verwerken naar de uiteindelijke CSS bestanden, is GULP. Magento wordt standaard geleverd met GRUNT maar ook dit is in praktijk, tegenover GULP, een methode die de nodige verschillen met zich mee brengt. Natuurlijk is het een manier van werken en wanneer je geen problemen ondervindt met het gebruik van GRUNT is er niet direct een reden om over te stappen, maar hieronder staan een aantal voordelen van het gebruik van GULP tegenover GRUNT.


Hierboven wordt een chart afgebeeld met de nodige statistieken over Gulp tegenover Grunt. Deze statistieken zijn afkomstig uit 2016, maar deze tendens houdt ook in de komende jaren waarschijnlijk stand. In de chart is te zien dat, omdat Grunt al langer op de markt is, er meer plugins beschikbaar zijn. Daartegenover staat dat de community voor Gulp enorm aan het groeien is, en er steeds meer projecten komen die gulp als task runner gebruiken. Hieronder staan een aantal punten die Gulp tegenover Grunt aantrekkelijker maken:

Syntax.

Ook gulp biedt een syntax die gemakkelijker te begrijpen is en daardoor zijn de configuratie bestanden gemakkelijker te schrijven zijn.

Snelheid
Zoals in de chart staat is Gulp tegenover Grunt tot wel 4x sneller in het compilen van de CSS. Voor kleinere projecten is het verschil tussen 0.2 en 1 seconde niet heel erg te merken maar wanneer je met de grotere projecten, zoals dat in Magento2 het geval is, aan de gang gaat kan het wezenlijk verschillen.

Opkomend.
Zoals in de afbeelding te zien is, zijn er op dit moment voor grunt meer plugins beschikbaar maar er is ook te zien dat er een grote groep mensen is die met gulp aan de gang zijn. Dit heeft als resultaat dat er binnen een korte tijd veel nieuwe ontwikkelingen plaatsvinden en dat de community steeds groter wordt. Deze ontwikkeling zorgt er dan weer voor dat je bij vragen of problemen altijd ergens terecht kunt waar er mensen zijn die je hierbij kunnen helpen.

Al deze feiten zijn ook de reden geweest voor Guapa om voor alle projecten volledig over te stappen op SCSS. Hiervoor hebben we ons eigen Guapa Blank theme ontwikkeld. Dit is een blank theme gebaseerd op de Snow.Dog theme-blank-sass die op zijn beurt weer gebaseerd is op het Magento blank theme.

Simpelweg houdt dit in dat we voor een nieuw project een solide basis hebben staan waarin onder andere de volgende elementen eenvoudig over de gehele webshop volgens design goed gezet kunnen worden:

  • Layout voor de gehele webshop voor alle devices.
  • Categorie specifieke layout voor 1 column, 2 columns-left, 2columns-right en 3 columns.
  • Categorie grid.
  • Product sliders
  • Primaire kleuren
  • Links
  • Typografie
  • Primaire en Secundaire buttons.
  • Etc.

Hierbij hebben we ook nog een gulp task ontwikkeld die ervoor zorgt dat je nooit twee keer dezelfde CSS in laadt en zo je broncode clean houdt. In de nieuwe frontools van Snow.Dog is er ook een striktere vorm van SCSS ontwikkeling aangehouden waardoor we gedwongen worden om nettere code te schrijven, en dit zorgt ervoor dat we onze kwaliteit nog beter kunnen waarborgen.

Al met al hebben we een stabiele basis ontwikkeld waarin we het ontwikkelen voor onszelf makkelijker hebben gemaakt. Wil je meer weten over deze implementatie technieken of over onze manier van werken? Neem dan gerust contact met ons op of plan een Magento 2 demo met onze experts in