SASS Dersleri 1: SASS Nedir, Nasıl Kurulur?

SASS fikri ilk doğduğunda sözdizimi Ruby gibi planlanmıştı. Kullanım oranı arttıkça front-end geliştiricilerin CSS’ten gelen el alışkanlığı göz önünde bulundurularak, sözdizimi değişti ve SCSS olarak yeniden şekillendi. SCSS verimliliği artırır ve karmaşık CSS görevlerini kolaylaştırır. Hata ayıklaması kolaydır.

KURULUM

Bağlantı'dan sisteminize uygun paketi indirin.

İndirdikten sonra varsayılan ayarlarda programı kurun.

SASS kullanabilmek için localhost üzerinde çalışmanız gerekmektedir. Bunun için xampp kullanabilirsiniz. xampp indirdikten sonra varsayılan ayarlarda kurulum işlemini gerçekleştirebilirsiniz.

xampp kurulum işlemlerinin ardından C:/xampp/htdocs klasöründe test adlı klasör oluşturalım. Ve içerisine aşağıdaki yapıda dosya(lar) ve klasör(ler) oluşturalım.

Başlat -> Ruby yazıp aratın ve konsol ekranını açın. SASS kurulumu için açılan konsol’da kurulumun gerçekleşeceği dizine giriş yaptıktan sonra “gem install sass” kodu ile SASS kurulumunu gerçekleştirin.

SASS (.scss) dosyalarımızı, style (.css) dosyalarına otomatik olarak dönüştürmek için oluşturduğumuz test dizinine giriş sağladıktan sonra konsol’da “sass –watch sass:style” kodunu kullanıyoruz. Bu işlem sonucunda .scss uzantılı dosyalarında yapılan her değişiklik dosya kaydedildikten sonra sass klasöründeki dosyaları style klasörüne çıkartır.

.scss dosyasında değişiklik yapıp kaydedelim. style klasöründe bizim için dosya(lar) oluşturuldu.

Yapılan değişiklik:

.test {
  color: red;
  &:hover {
    color: blue;
  }
}

Çıktı:

.test {
  color: red; }
  .test:hover {
    color: blue; }

/*# sourceMappingURL=style.css.map */

SASS ile navbar örneği:

Bir sonraki derslerde görüşmek üzere.

Kaynak: https://medium.com/@ricardozea/sass-for-beginners-the-friendliest-guide-about-how-to-install-use-sass-on-windows-22ff4a32c1f7