Sass automatisch omzetten naar minified CSS in NetBeans

Om het leven nog aangenamer te maken besloot ik deze week eens uit te zoeken hoe je in NetBeans automatisch een CSS-bestand genereert met een Sass-bestand. Voor wie het nog niet weet: met Sass kun je beter en eenvoudiger CSS genereren, door CSS-regels in een gestructureerde, geneste indeling te zetten. In NetBeans kun je dan CSS genereren door simpelweg een Sass-bestand op te slaan. Je kunt zelfs een optie toevoegen om de CSS te minifyen.

Volg onderstaande stappen om vandaag nog met Sass je CSS te bakken vanuit NetBeans in Windows.

  1. Download SASS voor Windows. Dit is onderdeel van Ruby. Je vindt het hier: https://rubyinstaller.org/downloads/
  2. Installeer Ruby.
  3. Open de command prompt van Windows (CMD).
  4. Ga in CMD naar de juiste directory: cd c:\<Ruby directory>\bin
  5. Installeer Sass met het volgende commando: gem install sass
  6. Ga in NetBeans naar Options > Tools > Miscellaneous > CSS Preprocessors
  7. Vul achter Sass path in: C:\<Ruby directory>\bin\sass.bat en klik op Install Sass. Klik daarna op OK.
  8. Rechtsklik op een openstaand project en klik op Properties.
  9. Klik links in het menu op CSS Preprocessors.
  10. Wat veel mensen vergeten te vermelden is het volgende. Je moet ook opgeven waar je SCSS-bestand staat en waar het CSS-bestand moet worden geplaatst. Dat doe je door de paden in de tabel te zetten onder Input en Output. Bv. respectievelijk /wp-content/themes/king/assets/king/scss en /wp-content/themes/king/assets/king/css.
    Zoals je ziet zijn het absolute paden t.o.v. de websiteroot.
  11. Als je wilt dat de CSS wordt geminified, vul dan achter Compiler options in: –style compressed. Klik op OK.
  12. Herstart NetBeans voor de zekerheid.
  13. Als je nu een SCSS-bestand aanpast, zou je onderin Netbeans Sass (compile) moeten zien met daarachter een loader. De CSS staat binnen enkele seconden klaar in de directory die in stap 10 is opgegeven onder Output.