[Foundation 4 / WP Reverie] SASS/SCSS installatie & vragen

[TerraGuy]

Om weer even helemaal up-to-date te komen qua webdesign en de workflow daaromtrent, heb ik me ingelezen in responsive webdesign, het framework Foundation 4 en een WordPress template genaamd Reverie die daarvan gebruik maakt.

Nu wilde ik het stap-voor-stap aanpakken, eerst alleen de grid-layout, responsive design etc, en pas daarna SASS/SCSS anders wordt het wat veel. Maar al snel merkte ik dat het beter is om toch maar met SASS/SCSS te werken, aangezien Reverie daar standaard gebruik van zou maken.

Maar eerlijk gezegd vat ik het niet. Er staat bij Reverie dat standaard Sass gebruikt wordt, en dat als je CSS wilt gebruiken je iets moet aanpassen. Maar de output in de header van de website zijn gewoon links naar CSS-bestanden. Ook wijzigingen in de SCSS-bestanden doen niets (een body{display:none!important} doet niets in style.scss maar wel in style.css).

Verder lezende zie ik dat je dan Compass moet installeren. En daar lees ik dan weer dat je Ruby geinstalleerd moet hebben. En daarvoor zie ik dan weer ingewikkelde tutorials die niet beschrijven hoe je dat doet als je webspace huurt en daarop werkt vanuit Dreamweaver. Klinkt allemaal erg ingewikkeld voor iets wat mij eenvoudig lijkt, gewoon een scss-parser eroverheen halen toch? Of denk ik nu te simpel?

Nou ja, een en al verwarring, hopelijk heeft iemand wat tips/duwtjes in de goede richting, want ik zit nu al twee dagen tevergeefs te proberen het te snappen.

- Gebruikt het WordPress-template Reverie standaard wel of niet SCSS/SASS?
- Is het nodig om eerst Ruby, dan Compass te installeren voordat het uberhaupt werkt, of heeft het gewoon voordelen maar zou SASS/SCSS out-of-the-box ook moeten werken (er hoeft toch alleen een script overeen gehaald te worden om het te converteren naar CSS toch)?
- Zo ja, wat is een fatsoenlijke manier om Ruby te installeren als je een webspace huurt (Apache)? Ik heb toegang via DirectAdmin bij Antagonist, waar ik verder niets over Ruby tegen ben gekomen. Waar installeer je dat, in de root, of in de map waar de website staat?

[Barryvdh]

Je .scss bestanden moeten inderdaad gecompileerd worden met Compass. En dat is weer een 'gem' voor Ruby, dus heb je inderdaad ook Ruby nodig. Dat kan je ook terugvinden op de websites van Foundation en Compass.
Je hebt ook wel tools om dat op je desktop te doen, bijvoorbeeld http://mhs.github.io/scout-app/ (niet getest, alleen een van de eerste hits op google), zodat je gewoon de gecompileerde css bestanden kan uploaden.
Als je beetje rondsurft kom je ook install guide van Ruby tegen: https://www.ruby-lang.org/en/downloads/

Ik zou zeggen dat je theme zowel de SCSS files (bronbestanden) als de gecompileerde CSS meelevert. Op die manier kan je altijd gewoon css gebruiken als je dat wil, maar kan je ook zelf de files compileren.
Voordeel van de SCSS files is natuurlijk dat je variabelen kan gebruiken en stuk makkelijker kan aanpassen.

[TerraGuy]

Ah, dus als ik het goed begrijp type je in de SCSS-bestanden, die dan weer omgezet moeten worden naar CSS. De website zelf leest alleen de CSS-bestanden uit. En dat omzetten doet Compass (on the fly) maar kun je ook handmatig doen?

[ Voor 5% gewijzigd door TerraGuy op 15-11-2013 12:38 ]

[Barryvdh]

Ja, weet niet of hij het on-the-fly doet maar je hebt er vast wel tools voor die de folder in de gaten houden, of anders moet je een script runnen. (Ik gebruik zelf alleen LESS, maar dat lijkt me hetzelfde principe)

[Munki]

TerraGuy schreef op vrijdag 15 november 2013 @ 12:35:
Ah, dus als ik het goed begrijp type je in de SCSS-bestanden, die dan weer omgezet moeten worden naar CSS. De website zelf leest alleen de CSS-bestanden uit. En dat omzetten doet Compass (on the fly) maar kun je ook handmatig doen?

De SCSS bestanden worden inderdaad gecompiled naar CSS bestanden, zodat die vervolgens weer uitgelezen kunnen worden door de browser. Zie http://sass-lang.com/install , hier wordt het één en ander uitgelegd. Ik gebruik zelf de app 'Codekit' (mac) om de SASS bestanden automatisch te compilen, maar het kan ook via de terminal ('sass watch' commando), maargoed, dit staat allemaal in de documentatie van SASS. Compass is overigens een 'library' met handige functies, zoals het resetten van je CSS of bijv. functies die voor bepaalde fallbacks zorgen, zodat oudere browsers ook ondersteund worden.

[FotW]

Ontwikkelen doe je in principe op een lokale testomgeving, niet op een live server. Op de Mac doe ik ongeveer wat Munki hierboven beschrijft, op een Windows omgeving maak ik gebruik van de door Barryvdh genoemde Scout App in combinatie met Livereload om de browser na de compilatie te verversen.

[TerraGuy]

@FotW: ik werk op een test-server, zodat ik makkelijk overal kan inloggen en eraan kan werken, op verschillende mobieltjes kan checken hoe het eruit komt te zien en hoe het aanvoelt etc. Nu zit ik op m'n werk achter een Mac, thuis weer achter een Windows-pc. Het voelt heel flexibel, wel een afhankelijkheid van de internetconnectie, maar dan krijg je ook een goed beeld van hoe snel/langzaam iets in de praktijk wordt. Daarna verhuis ik de bestanden naar de live-server, als alles getest is.

Maar als ik dit zo lees, is dat dan onhandig als je met Sass/Scss werkt? Of moet je dan gewoon andere programma's hebben die compileren op een webserver? Zit dat in Compass of is dat Ruby?

[Barryvdh]

Dan installeer je dus gewoon Ruby + Sass/compass op je server idd.

[TerraGuy]

Ik zit te kijken hoe ik Ruby geïnstalleerd krijg, maar ik kom daar niet uit. Mijn websites staan bij een webhostingbedrijf (Antagonist) waar ik alleen toegang heb via FTP en DirectAdmin. Alle tutorials die ik tegenkom om Ruby te installeren gaan over Mac, Windows en Linux waarbij je via de commandline Ruby installeert.

Is het überhaupt mogelijk om bij zo'n webhosting, gebaseerd op Linux, Ruby te installeren zonder commandline, alleen via FTP?

[Merethil]

Geen SSH toegang tot je server?

[Ramon]

Je kan inderdaad bij Antagonist niet via SSH bij de server (is gewoon shared hosting) dus kan je daar geen Ruby op installeren en dat is ook niet nodig en wil je ook niet. Wat je wil is op je Mac op je werk en thuis op windows installeer je een applicatie, zoals dat Scout wat hierboven genoemd is of Compass zelf als je via de command-line wilt werken, die applicatie houdt een directory in de gaten waarin de .scss bestanden staan en compileert on-the-fly de .scss bestanden naar .css bestanden die je dan via FTP naar de server verstuurt.

Eigenlijk doe je gewoon hetzelfde wat je waarschijnlijk altijd al deed, alleen in plaats van .css bestanden editten, edit je .scss bestanden. Je upload dus gewoon de .css bestanden, de .scss bestanden hoeven niet eens op de server terecht te komen.

Als ik een kleine tip mag geven (zie dit als nog een mogelijkheid om je workflow te verbeteren en niet om zomaar kritiek te geven): Je schrijft dat deze methode je de mogelijkheid geeft om overal te werken, maar hoe hou je bij wat de laatste versie is? Of is die op de test-server staat altijd te laatste versie? Je zou kunnen overwegen om versiebeheer te gebruiken zodat je ook makkelijk terugkan gaan naar oudere versies mocht dat nodig zijn. Je kan bijvoorbeeld kiezen voor git met bitbucket, gratis tot 5 gebruikers, in combinatie met deployhq (gratis voor één project) om je site op een gestructureerde manier op de server te zetten. kies je voor beanstalkapp dan heb je deployment en versiebeheer ineen en kan je zelfs vanaf je smartphone als je in de disco staat een rollback of nieuwe doen (mocht dat nodig zijn )

[ Voor 55% gewijzigd door Ramon op 17-11-2013 19:31 ]

[MueR]

Er zijn ook tools om via PHP SCSS te compilen door bijvoorbeeld http://leafo.net/scssphp/ te gebruiken.

[Ramon]

Dat betekent niet dat dat in dit geval ook handig of nodig is

[TerraGuy]

@Ramon: ah, ik zat al zo te denken toen ik onder de douche stond Ik zat al zo vast in mijn hoofd met dat alles op de (shared) server moest, dat me pas net te binnen schoot dat dat misschien niet nodig is. Thanks!

En inderdaad heb ik geen versiebeheer, gewoon altijd de laatste versie; zo groot zijn mijn projecten (nog) niet. Alhoewel er laatst wel een keer iets misging waarbij teruggaan handiger was geweest, dus versiebeheer toevoegen aan de workflow is zeker een optie

Wat is er overigens op tegen om MueR zijn methode te gebruiken? Klinkt ook als een optie, die bovendien makkelijker te implementeren is.

[Barryvdh]

Ik gebruikt de less variant, ook de php versie van leafo. Werkt opzich prima maar af en toe heb je kleine verschillen, waardoor iets niet 100% hetzelfde werkt. Je kan het iig wel proberen.

[Ramon]

TerraGuy schreef op zondag 17 november 2013 @ 20:34:
Wat is er overigens op tegen om MueR zijn methode te gebruiken? Klinkt ook als een optie, die bovendien makkelijker te implementeren is.

Wat makkelijker is, is subjectief denk ik Een applicatie lokaal mee laten draaien die je .scss compileert vind ik nou niet echt ingewikkeld. Als je het op de server doet moet je daar na iedere update op wachten, zeker als je grote sprites hebt zal je daarmee een behoorlijke vertraging introduceren. Bovendien introduceer je een (minieme) vertraging omdat iedere aanvraag van je styles door PHP moet.

[ Voor 9% gewijzigd door Ramon op 18-11-2013 19:09 ]

[Barryvdh]

Dat doe je dus natuurlijk alleen tijdens development. Dan schrijf je het resultaat weg naar plat css. En tijdens recompile je ook alleen als de bestanden gewijzigd zijn..

[Ramon]

Dus dan ga je iedere keer als je een scss change hebt gedaan een bepaalde url aanroepen? Hoe is dat praktisch in je workflow?

[Barryvdh]

Bijvoorbeeld iets in de richting als dit (fictief, maar je snapt het idee)

PHP:

if($debugMode){
    if(filemtime($inputFile) > filemtime($outputFile)){
        compile_scss($inputFile, $outputFile);
    }
}

Je kan overigens ook met Assetic werken, om meerdere dingen te combineren (heeft een ScssphpFilter en ondersteund compass)