A leghasználhatóbb: Scout-App
Kipróbáltam több SASS => CSS compilert is és arra jutottam, hogy a leggyorsabb és legegyszerűbben használható a Scout-App.
Használatbavétel
Letöltés innen: https://scout-app.io/
Letöltés után (Windowson) a ZIP file-t kicsomagolod, ahová akarod. A Scout-App könyvtárból elindítod a Scout-App.exe fájlt.
Beállítod a File / Settings oldalon a nyelvet (ha akarod)
Létrehozol egy projektet: File / New project. Kiválasztod, hogy hol legyen a projekt, majd beállítod az alábbiakat
Input folder: Azok a könyvtárak, ahol a SASS fájlok lesznek (scss)
Output folder: Ahová kerül az eredmény css fájl.
Environment:
- Development (tervezői): Választasz az alábbi stylusok közül:
- Output Style (A kimeneti CSS fáj stílusa)
- Nested (Beágyazott)
- Expanded (Kiterjesztett)
- Production (Éles szerver)
- Output Style (A kimeneti CSS fáj stílusa)
- Nested (Beágyazott)
- Expanded (Kiterjesztett)
- Compact (Kompakt)
- Compressed (tömörített)
Ha ezeket beállítottad, akkor készen vagy. A Projektek listájában rá kell kattintani a projekt mellett található Play gombra és elkezdi figyelni a hátteret és fordítja a SASS fájlokat, ha változást észlel. Az eredmény 1-2 sec!
Ruby and Compass (old-school)
Mint korábban írtam az SCSS-hez szükséges egy előfeldolgozó, amelyet a Compass-nak hívunk:
Telepítés menete:
1. Ruby fordító telepítése innen. A ruby egy fejlesztő rendszer, aminek segítségével nagy méretű website-okat lehet írni. Windows esetén innen lehet letölteni: https://rubyinstaller.org/
2. Telepítsük a SASS és Compass-t. ehhez nyitni kell egy konzolt, amiben futtatni lehet a Ruby részét képező GEM parancsokat.
gem install sass
gem install compass
Amikor egy könyvtárban szerkesztjük az SCSS fájlokat, akkor parancssorból elindítjuk az alábbi parancsot
compass init
Windowson ezt egy batch fájlból érdemes indítani.
Az első indításkor a létrejövő config.rb fájlban létrejönnek bizonyos beállítások. Ilyen például a SASS és a CSS könyvtár elnevezése és helye. Ez a fájl egy editorral átírható akármikor. Például érdemes a létrejövő CSS fájlokra vonatkozó optimalizást használni.
A SASS könyvtárban lesznek a szerkesztendő fájlok (SCSS fájlok), míg a CSS könyvtárba kerülnek a lefordított CSS fájlok.
Fejlesztésnél indítsuk a parancsot a watch opcióval. Ekkor a parancs a memóriában marad, figyeli az SCSS fájlokat tartalmazó könyvtárt és ha módosítást érzékel, akkor automatikusan lefordítja a megfelelő CSS fájlokra.
compass watch
A Compass nem csak egy fordító, hanem egy teljes könyvtár (library) is, amellyel az SCSS nyelvet sokrétűen kiterjeszthetjük és sokkal hatékonyabban kódolhatunk!
a COMPASS lehetőségeiről itt lehet tájékozódni: http://compass-style.org/reference/compass/