5.11 SASS előfeldolgozó telepítése

Visual Studio Code

Ha Visual Studio Code-ot használunk a webfejlesztéshez, akkor telepítsük a HTML SCSS Support Extension-t. Abban a könyvtárba hozza létre a css tartalmat, ahol elkészítettük azt. Az SCSS / SASS változtatásait azonnal érzékeli és módosítja a css eredményt az aktuális könyvtárban!

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/