Sass, Front-end dünyasında kullanılan bir CSS preprocessor'üdür Daha düzenli ve organizeli bir şekilde CSS yazmanıza olanak sağlar Kurulumu oldukça kolaydır Sass dosyaları scss veya sass uzantılarına sahiptir ve komut satırında dönüştürülebilirler Variable kullanımı ile daha hızlı ve verimli kod yazabilirsiniz Local variablelar, lokal değişkenlerdir ve CSS kodlarımızı daha okunaklı ve kolay anlaşılabilir hale getirir

Sass, Front-end dünyasında kullanılan bir CSS preprocessor'üdür. Bu preprocessor, CSS yazarken kullanılan kodların daha düzenli ve organizeli bir şekilde yazılmasına olanak sağlar. Sass'ın kodların organizasyonu için ne kadar önemli olduğunu anlamak için iki CSS kod bloğuna bakmamız yeterlidir. Aşağıdaki örneklerde 'box' sınıfı altında yer alan CSS kodları yer almaktadır:

.box {  background-color: #ffa500;  color: #fff;  font-size: 18px;  padding: 20px;}

.box {  background-color: #ffa500;  color: #fff;  font-size: 18px;  padding: 20px;  span {    color: #000;  }}

Yukarıdaki örnekte gösterilen Sass kod bloğunda, 'box' sınıfının içerisindeki 'span' elementine özel bir stil tanımlanmıştır. Bu, CSS kodlarının daha da organizeli ve erişilebilir olmasını sağlar. Sass ayrıca CSS kodlarını tekrar tekrar yazmamızı engeller ve CSS dosyalarının boyutlarını da en aza indirir.

Kurulumu ve Kullanımı

Sass, CSS preprocessor'leri arasında en popüler olanıdır ve CSS kodlarının yönetimini kolaylaştırır. Sass kodlarını kullanmak için öncelikle Sass'ı bilgisayarınıza indirmeniz gerekmektedir.

Sass'ın kurulumu oldukça kolaydır. İşletim sistemine uygun olan Ruby programını indirip yükledikten sonra komut satırından Sass'ı yükleyebilirsiniz.

Ruby yüklendiğinde aşağıdaki komut kullanılarak Sass kurulabilir:

gem install sass

Kurulum işlemi tamamlandıktan sonra Sass'ı kullanmaya başlayabilirsiniz.

Sass dosyaları .scss veya .sass uzantılarına sahiptir. Bu dosyalar CSS dosyalarının yerine kullanılır ve CSS dosyalarında yer alan kodların özelliği, Sass dosyalarında da kullanılabilir.

Sass dosyalarının CSS dosyalarına dönüştürülmesi için komut satırında Sass ile ilgili işlemler gerçekleştirilmesi gerekmektedir.

Bunun için, Sass dosyasını CSS dosyasına dönüştürmek için aşağıdaki komut kullanılır:

sass input.scss output.css

Bu komut CSS dosyasını oluşturur ve Sass kodları yazılan dosyayı CSS dosyasına dönüştürür. Artık bu CSS dosyasını HTML sayfasında kullanabilirsiniz.

Variabler

Sass, CSS kodlarının daha düzenli ve yönetilebilir olmasını sağlamak için kullanılan bir araçtır. Bu araç sayesinde CSS kodlarını daha hızlı ve verimli bir şekilde yazmak mümkündür. Sass'da kullanılan bir diğer önemli özellik ise variable'lardır. Variable'lar, belirli bir değere atanan bir isimdir ve bu isimle istediğiniz herhangi bir yerde bu değeri kullanabilirsiniz.

Daha önce CSS kodlarında aynı rengi veya boyutu birkaç kez yazmak zorunda kaldınız mı? Sass'da variable kullanarak, bu değerleri tek bir noktada tanımlayabilir ve yanlışlıkla değişiklik yapmanızı engelleyebilirsiniz. Örneğin, $background-color adında bir variable tanımlayarak, tüm sayfada aynı arkaplan rengini kullandığınızdan emin olabilirsiniz.

Sass'ta variable kullanımı oldukça basittir. Variable tanımlamak için $ işareti kullanılır ve değerini atamak için : işareti kullanılır. Ardından, variable'ı kullanmak istediğiniz yere $ ile başlayarak atanan değeri yazabilirsiniz. Örneğin, $background-color: #ffffff; yazarak #ffffff rengini background-color adlı variable'a atayabilirsiniz.

Local Variables

Lokal variablelar, Sass ile CSS yazarken kullanılan ve bir seçicinin içinde, başka seçicilerin dışında kullanılan değişkenlerdir. Bu sayede, tekrar tekrar aynı CSS kodlarını yazmak yerine, variablelar kullanarak CSS kodlarını daha kolay ve hızlı bir şekilde oluşturabiliriz.

Local variablelar, $ işareti ile tanımlanır. Tanımlama yapıldıktan sonra, $ isareti kullanılmadan, variable adı yazılarak değişkenler kullanılır. Örneğin, aynı renk seçici için farklı tonların kullanılması durumunda, local variablelar kullanılabilir.

Örneğin, $turuncu variable’ına #FFA500 değerini atayarak;

```$turuncu: #FFA500;```

Daha sonra bu değeri kullanmak için;

```.sembol{ color:$turuncu;}

.temel{ background-color:$turuncu;}```şeklinde kullanabiliriz. Bu sayede, aynı renk kodunu her defasında tekrar etmek yerine, $turuncu variable’ına atanan değeri kullandık.

Sass ile local variablelar kullanarak, CSS kodlarımızı daha okunaklı ve kolay anlaşılabilir hale getiririz. Kodları tekrar etmek yerine değişkenleri kullanarak, daha düzenli ve okunabilir kodlar yazabiliriz. Bu da hem işimizi kolaylaştırır, hem de kod boyutunu azaltır.