1

Onderwerp: SASS het hoe en wat?!

Hoi Fronteers,

sinds enkele maanden gestart met het gebruik van SASS (en Compass) en sindsdien erg enthousiast geworden over deze tool! Het scheelt duidelijk in ontwikkeltijd en je scss files blijven lekker overzichtelijk en compact. Verder vind ik de image sprite mogelijkheden van Compass erg fijn werken.

Nu hoor ik wel eens klachten over de tools dat je ze eerst moet installeren voordat je het kan gebruiken. Dit maakt de overdraagbaarheid wat lastiger. Verder integreert het soms slecht met het backend built systeem.

Ik ben benieuwd naar jullie mening over SASS en hoe jullie het integreren binnen projecten. Ben je bijvoorbeeld tegen problemen aangelopen en hoe heb je deze getackled? Het gaat dan niet om welke mixins of libs je gebruikt maar puur de workflow.

2 Laatst bewerkt door Arne de Bree (07-11-2012 15:13:37)

Re: SASS het hoe en wat?!

Hi Arno!

Hier besloten om met een directory layout als volgt te werken (versimpelt voor alleen CSS/SASS, gelijke aanpak voor HAML en overige files):

<root>
  _sources
    sass
  style
  tools

Met dan:
in <root>/_sources/sass de scss files.
in <root>/tools/ de sass compiler, gesymlinked naar <root>/tools/sass-current/
in <root>/_sources de volgende watcher shell script:

#!/bin/bash
##
## Shell script for starting watches on sass sources files and compile them into the style/ directory as css files
## 
## Note of warning: this will override any existing css file with the same name
##
## !! Please do not commit any compiled css file to prevent confusion about source and compiled version
##

##
## Determine directory of this script so it can be used to find the rest of the paths relative to this 
##
CWD="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

BIN_SASS=$CWD/../tools/sass-current/bin/sass
DIR_SOURCES=$CWD/sass/
DIR_OUTPUT=$CWD/../style/

##
## Engage!
##
$BIN_SASS -l --watch $DIR_SOURCES:$DIR_OUTPUT

Er zijn ook collega's die met codekit werken, maar met bovenstaand shellscript hoef je dus geen codekit aan te schaffen.

3

Re: SASS het hoe en wat?!

Hier liepen we tegen het issue aan dat we zowel werkplekken met Macs als met Windows hebben. Compass was dus een no-go. Hierbij zijn we terecht gekomen op Scout (http://mhs.github.com/scout-app/). Dit werkt op de Mac hetzelfde als op Windows, dus hebben we nog steeds overal dezelfde workflow, ongeacht het besturingssysteem.

4

Re: SASS het hoe en wat?!

Bernard Nijenhuis schreef:

Hier liepen we tegen het issue aan dat we zowel werkplekken met Macs als met Windows hebben. Compass was dus een no-go.

Wat werkte er dan niet, de mac of pc? Wij hebben het op beide draaien

5

Re: SASS het hoe en wat?!

Arno Wolkers schreef:
Bernard Nijenhuis schreef:

Hier liepen we tegen het issue aan dat we zowel werkplekken met Macs als met Windows hebben. Compass was dus een no-go.

Wat werkte er dan niet, de mac of pc? Wij hebben het op beide draaien

Zie nu pas dat Compass er ook voor Windows is, haha. Nooit echt bij stilgestaan, omdat ik tegelijkertijd ook al tegen Scout aan liep en dat gewoon gratis was, dus dat was gemakkelijker om mee proef te draaien. Ik moet zeggen dat Scout me prima bevalt vooralsnog.

6

Re: SASS het hoe en wat?!

Zó!,... *handenwrijvend*, mijn eerste post op dit forum:

Binnen een Drupal-project konden we de het probleem met workflow (ook tussen Mac en Win) oplossen door een Drupal-theme te gebruiken dat de SCSS bestanden zelf comileerd met behulp van PHP: het SASSON-theme

Overigens bestaat er naast SASS ook LESS, misschien dat je daarbij minder problemen hebt met Mac/WIN.

Naar ik begreep is het tegenwoordig (i.t.t. een jaartje terug, we schrijven nu 2013) goed mogelijk Ruby draaiend te krijgen onder Windows, dus waarom zou SASS dan nog een probleem opleveren?

7

Re: SASS het hoe en wat?!

Ik heb zelf eerst een tijdje LESS gebruikt voordat ik naar SASS overstapte, maar ik heb een lichte voorkeur voor SASS:

- iets krachtiger functies
- client-side LESS zorgt mogelijk (afhankelijk van hoe je het opzet) voor meer server requests terwijl je met SASS juist handig allerlei losse CSS bestanden kunt samenvoegen en desgewenst kunt minify'en.

(Ook mij eerste post hier trouwens)

STREEFF //websites // huisstijlen // information design

http://www.streeff.nl

8 Laatst bewerkt door Guido Bouman (03-08-2013 11:14:53)

Re: SASS het hoe en wat?!

Mijn persoonlijke voorkeur gaat uit naar Stylus. (http://learnboost.github.io/stylus/) Dit omdat het veel vergevelijker, en flexibeler is. Je kan letterlijk alles weg laten. Het grote voordeel voor mij is de transparent mixins functie.

Bijvoorbeeld:
Hier wordt alleen de native variant van border-radius als normale CSS ingevoerd.

a.button
  border-radius 5px

Maar voeg je nou een mixin toe, dan snapt de vorige code automatisch dat je de functionaliteit van border-radius uitgebreid hebt met je eigen code.

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

Je hoeft niets aan je styles te veranderen. Om alles snel te ontwikkelen op Chrome schrijf je native styles, en om alles cross-browser compatible te maken voeg je later je mixins toe. Zonder dat je de rest van je stijlen aan hoeft te passen.

Ik gebruik dit met yeoman. (http://yeoman.io/) Wat Yeoman doet is jou alle vrijheid geven om je omgeving op te zetten met Grunt. Yeoman komt met een hoop standaard setups (Generators genaamd) die er voor zorgen dat je via je terminal een hoop werk kan verzetten.

Je kan Stylus, SASS, SCSS of LESS gebruiken voor je CSS, CoffeeScript of IcedCoffeeScript voor je JS, en HAML, SLIM of ERB voor je HTML. Grunt kan dit allemaal on the fly compilen en zelfs de veranderingen van de code naar je browser pushen zonder de pagina te vernieuwen.

Wanneer je een versie naar je productie servers wilt deployen kan je een grunt commando oproepen dat al je assets (CSS, JS, HTML) compiled, minified en op je server zet over FTP of via Git.

EDIT:
Overdraagbaarheid: Door een package.json te gebruiken hoef je alleen node geinstalleerd te hebben, wanneer een project overgedragen wordt hoef je letterlijk maar 1 commando uit te voeren: `npm install`. Klaar. Completely up and running met alle tools & compilers.

9

Re: SASS het hoe en wat?!

Bernard Nijenhuis schreef:

Hier liepen we tegen het issue aan dat we zowel werkplekken met Macs als met Windows hebben. Compass was dus een no-go. Hierbij zijn we terecht gekomen op Scout (http://mhs.github.com/scout-app/). Dit werkt op de Mac hetzelfde als op Windows, dus hebben we nog steeds overal dezelfde workflow, ongeacht het besturingssysteem.

Met Compass bedoel je de compass-app neem ik aan? Wij gebruiken zowel Mac als Windows computers en het maakt echt niet uit of iemand een windows of mac gebruikt. Iedereen kan op zijn eigen manier 'Compass watchen'.
Ik zelf doe dit het liefst command line.

Wanneer je het command line wilt doen, dan moeten Sass en Compass inderdaad even geinstalleerd worden, maar dat is een werkje van 5 minuten.