PhpStorm Less, Sass Compiler Aktif Etmek

Merhaba arkadaşlar,
Web Front-end için css yazarken çok fazla zaman aldığını düşündüğüm için Sass/Scss ve Less'i araştırdım. Neyse ki kullandığım editörde bunları otomatik olarak derleyip css formatına dönüştüren özellik mevcut. Bu özelliği kullanabilmek için ilk önce bilgisayarımıza Nodejs'yi kurmamız gerekiyor.

Nodejs Kurulumu​

Nodejs kurmak için sitesine geliyoruz ve işletim sistemimize uygun en güncel sürümü indiriyoruz. İndikten sonra kurulumu yapıyoruz.
Kurulum tamamlandıktan sonra cmd açıp npm komutunu giriyoruz. Eğer aşağıdaki resimdeki gibi sonuç ile karşılaşırsanız her şey başarıyla kurulmuş demektir.

Sass/Scss ve Less Kurulumu​

Projenize Sass/Scss kullanacaksanız aşağıdaki komutu çalıştırınız.

npm install -g sass

Hepsini görmek için tıklayın...

Less kullanacaksanız aşağıdaki komutu çalıştırınız.

npm install --global less

Hepsini görmek için tıklayın...

Eğer her şey düzgün ise şu şekilde bir sonuç ile karşılaşmanız gerekecek.

PhpStorm'a Tanımlama​

Gerekli olan paketleri kurduktan sonra PhpStorm'da Sass/Scss ve Less kodlarımızı otomatik olarak css formatına dönüştürmek için ayarlarda tanımlama yapmanız gerekiyor.

Programın sağ üst köşesinden File -> Settings kısmına geliyoruz.
Daha sonra gelen pencereden sol menüden Tools > File Watchers sekmese geliyoruz.
Sağ tarafta + tuşuna basıp dosya uzantımızı seçiyoruz. Ben less ile devam edeceğim.


Resimde gördüğünüz gibi bazı ayarlar mevcut.
Program: Burada çalıştırılacak programı belirtiyoruz. Nodejs bende Program Files içerisinde kurulu olduğu için seçtim.
Arguments: Burada ise nodejs tarafından çalıştırılacak eklentiyi belirtiyoruz. Yüklediğim less modülü C:\Users\gsera\AppData\Roaming\npm\node_modules\less\bin\lessc dizininde.
$FileName$ ise PhpStorm'un kendi atadığı değişken. İşlenecek dosyanın adını tutuyor.

Kayıt ettikten sonra aktif etmeyi unutmayın. Artık less kodlarınızı yazarken eş zamanlı olarak css'e derleyecektir. Örnek olarak aşağıdaki görseli bırakıyorum.
style.css içerisindeki kodları sistem otomatik olarak oluşturuyor.




Peki neden böyle bir şey yaptım?
Konu başlığında da dediğim gibi web sitelerinin önyüzünü kodlarken css kodları çok uğraştırıcı oluyor. Less ve Sass sayesinde ise daha az kod yazarak aynı sonucu alabiliyoruz. Üstelik less örneğinde olduğu gibi değişkenler tanımlayabiliyoruz.. Daha fazla bilgi almak için less, sass ne olduğunu araştırabilirsiniz.

Yararlı konu olmuş.

Vscodeta css frameworkleri kullanmak çok daha iyi. Diğer uygulamalarda bazen sorunlar çıkarıyor çok kez kullanmış biri olarak söylüyorum. Üstelik Sass kullanmanızı tavsiye ederim. Sass, Scss ve Less'e göre çok hızlı çalışır. Tabi alışmak diğerlerine göre biraz zor ama css framei öğreniyorsan değer.

xpreda demiş ki:

Vscodeta css frameworkleri kullanmak çok daha iyi. Diğer uygulamalarda bazen sorunlar çıkarıyor çok kez kullanmış biri olarak söylüyorum. Üstelik Sass kullanmanızı tavsiye ederim. Sass, Scss ve Less'e göre çok hızlı çalışır. Tabi alışmak diğerlerine göre biraz zor ama css framei öğreniyorsan değer.

Hepsini görmek için tıklayın...

Öneriniz için teşekkür ederim. Less üzerinden gitmemim birkaç sebebi daha var. Öncelikle sitemizin kullandığı yazılıma eklenti geliştiriyorum ve Xenforo'da less kullanmış. Bir yandan elimin alışması için seçtim. Zaten program otomatik olarak css formatına çevirdiği için html kodlarına da less dosyalarını değil, css dosyalarını ekliyorum.