fibonacci

Van less naar scss

Notitie: 
notitie
Tekst: 

Gecko, Webkit en Trident gaan alledrie anders om met afrondingen onder de anderhalve pixel. Bij precieze lijnafstand ratio's waarvan de resultaten niet deelbaar zijn door 2 leidt dit tot onwenselijke verspringingen van een kolom in een kleiner corps ten opzichte van een kolom in een groter corps. Gecko toont geprefereerd gedrag en middelt. Webkit rondt af naar beneden en Trident naar boven. Het voert te ver om hiervoor in css de correcties te beschrijven. Hierdoor is verticaal ritme in webpagina's voorlopig onmogelijk in het scenario van meerdere kolommen met verschillende corpsgrootte waarbij de verhoudingen in de corpsgrootte zijn gestoeld op een ratio waarvan de resultaten niet deelbaar zijn door 2. Ik zou de correctie alsnog kunnen bewerkstelligen als ik variabelen kon gebruiken.

Less is een preprocessor taal voor CSS die beschikt over operators, variabelen, nesting en functies. Corey.aufang heeft hiervoor de Less preprocessor module gemaakt. Less kleurcodering wordt ondersteund in Aptana:

  1. Window >Preferences
  2. General->Editors->File Associations
  3. Add file type: *.less
  4. Add editor: Aptana CSS Editor (right at the top)

 Enige probleem is het gebrek aan een Less preprocessor voor javascript-aanpassingen (bij in en uitzoomen moeten de correcties opnieuw worden doorgerekend op basis van het default font). Less.js ondersteunt Less-processing in de browser. Dat zou uitkomst kunnen bieden.

Inmiddels wordt de Less-syntax geïncorporeerd in sass 3 onder de naam scss (Sassy CSS). Scss is net als Less volledig compatible met css. Het gebruikt dezelfde syntax. Hierdoor is het iets minder vriendelijk op de commandline maar blijft het in je ide erg overzichtelijk. De oude Sass-syntax gebruikte geen bracketing en was voor wie aan css gewend is niet overzichtelijk. Een bestaande lap sass-code deed bijna procedureel aan. Sommige coders geven daar de voorkeur aan. Andere problemen met Sass zijn dat het ontoegankelijk is voor designers en moeilijk te delen met anderen. (Eerlijkheidshalve is het bijna nooit een feest om met andermans css te werken. Er zijn best practices om standaard css toegankelijker en meer "objectgeoriënteerd" te maken maar dat is een ander onderwerp.) Sass 3 heeft ook ingebakken parsing en ondersteuning voor jquery ui en werkt zonder Compass. Bangpound heeft een Drupal-module voor de oude versie van Sass op Compass gemaakt om via de command line interface (cli) opdrachten door te geven.

Ik houd de ontwikkelingen op het gebied van Drupal en Less/scss in de gaten op Design for Drupal. Grootste probleem voor mij is om te komen tot een optimale workflow. Het lijkt erop dat ik hiervoor een editing environment op de development server zelf (dus onder Ubuntu) moet gaan aanmaken als ik overga op scss.

Syndicate content

User login