SASS veya SCSS kullanmak için birçok editör bulunuyor. En çok tercih edilen ve benim de kullandığım editör ise Visual Studio Code‘dur.
Bu yazımda Visual Studio Code’da yazmış olduğumuz SCSS kodlarını nasıl Css kodlarına dönüştürebileceğimizi göstereceğim.
Bunun için çok kullanışlı bir eklenti bulunuyor. Live Sass Compiler eklentisi.
İlk olarak Live Sass Compiler eklentisini kuralım.
Visual Studio Code programını açtığımızda soldaki ikon menüden Extensions ikonuna tıklıyoruz.
Arama kutusuna Live Sass Compiler yazıyoruz.
Eklentinin yanında bulunan Install linkine tıklayarak eklentiyi yüklüyoruz.
Yeni bir dosya ekleyip adını index.html yapıyorum.
Tekrar yeni bir dosya ekleyip adını style.scss yapıyorum.
Dikkat ederseniz ikinci dosyanın uzantısını .scss yaptım. Çünkü SASS değil SCSS kodları yazacağız. Eğer SASS kodları yazacaksanız dosya uzantısının .sass olması gerekiyor.
style.scss dosyası içerisine bazı kodlar yazdım. Kodların ne olduğu şuan için önemli değil. Bu yazıda kodların ne olduğunu değil de yazılan SCSS kodlarının Css kodlarına nasıl dönüştüreceğimize bakacağız.
Kodları yazdıktan sonra editörün alt tarafında bulunan Watch Sass linkine tıklıyoruz.
Bu işlemin ardından artık style.css adında yeni bir dosyanın oluştuğunu görebilirsiniz.
style.css dosyasının içerisine baktığımızda yazdığımız SCSS kodlarının Css kodlarına dönüştüğünü görebiliyoruz.
Peki bu dönüştürme işlemine neden ihtiyaç duyuyoruz?
Çünkü Html sayfalarımıza .scss uzantılı dosyaları referans olarak veremiyoruz.
Html sayfalarına dönüştürmüş olduğumuz style.css dosyasını ekliyoruz.
İstersek Css dosyasının sıkıştırılmış halini yani style.min.css dosyasını da otomatik olarak oluşturabiliriz.
Öncelikle html, css ve scss dosyalarını düzenli bir şekilde oluşturalım. Ben genelde aşağıdaki resimde olduğu gibi oluşturuyorum.
Visual Studio Code’da sol altta bulunan ayarlar ikonuna tıklıyoruz ve açılan menüden Settings seçeneğine tıklıyoruz.
Appearance kısmında bulunan Edit in settings.json linkine tıklıyoruz.
Aşağıdaki kodlar üzerinde gerekli değişikliklerimizi yaptıktan sonra buraya ekleyip kaydediyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
"liveSassCompile.settings.formats":[ // This is Default. { "format": "expanded", "extensionName": ".css", "savePath": null }, // You can add more { "format": "compressed", "extensionName": ".min.css", "savePath": "/dist/css" }, // More Complex { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ] |
Siz kendi klasör isimlerinize göre burayı düzenleyebilirsiniz.
Tekrardan style.scss dosyasına bazı kodlar yazıp Watch Sass linkine tıklıyorum.
Artık hem style.css hem de bunun sıkıştırılmış hali olan style.min.css dosyasını elde etmiş olduk.
Bunun yanında html, css ve scss dosyalarımız da daha düzenli olmuş oldu.
Visual Studio Code editöründe yazmış olduğumuz SCSS kodlarını bu şekilde Css kodlarına dönüştürebiliyoruz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
