Kullanılması gereken bir teknoloji SASS

Web tasarımda çok en önemli bir yere sahip olan CSS’in geliştirilmişi olan bu teknoloji, daha kolay CSS kodu yazmanızı, kodlarınızda değişkenleri kullanabilmenizi, gereksiz CSS kodlarından kaçınmanızı sağlıyor. Bu teknolojiyle stil sayfaları fazla büyümeden kolayca işlem yapabiliyorsun. Kendiniz fonksiyon yazabiliyorsunuz ve bu fonksiyonları kullanabiliyorsunuz.  Bu teknolojiyi kullanmak için öncelikle SCSS standartlarına uygun olarak kodlarınızı yazmanız, ardından Ruby Gems’den birisi olan SASS ile derlemeniz gerekiyor. Derlenince normal CSS’ye dönüşüyor ve böylece kullanabiliyorsunuz.

SASS ile SCSS arasındaki farklardan söz etmek gerekirse SASS noktalı virgül gibi ögeler kaldırılarak daha kolay kullanmanız sağlanıyor. Fakat SASS kullanırken dikkat etmeniz gerekenlerden birisi de girintiler. Derleyici girintilere göre yorumluyor kodunuzu. Yani buna bakarak SASS, Python’dan etkilenmiştir diyebiliriz.

Etkilendikleri arasında CSS, YAML ve HAML bulunuyor. Bu dillerden etkilenen dil 2007 yılında ortaya çıktı. SASS çıktıktan sonra 2 dili etkileyecektir: LESS ve Stylus.

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

SCSS şekli de şöyle.

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

SASS teknolojisi Ruby yüklü makinelerde kullanılabilir. Ruby Gems ile indirilip kurulduktan sonra derlemek için kullanılabilir. Bu teknolojinin bize en büyük faydası seri ve rahat kod yazmamız olacaktır. Çünkü bir başlık altında kural yazarken “&” ile hover ve benzeri pseudo sınıflarını kontrol edebiliriz. Yani şöyle yapabiliriz.

.makale{
    width: 100%;
    height: 80px;

    &:hover{

       width:65%;        

    }
}

Şeklinde yazdığımız betiğimiz şu şekilde derlenecektir.

.makale{
     width : 100%;
     height : 80px;
}

.makale:hover{
     width : 65%;
}

Sanırım Hint CSS en büyük örneklerden birisi olacaktır. Tamamen SCSS kullanılarak yapılan bu tooltip uygulaması herhangi bir Javascript kodu gerektirmeden çalışır. Hint CSS’ye ulaşmak için tıklayınız.

Kullanabilirseniz kesinlikle kullanmanızı öneriyorum. Hayatta en önemli şeyden yani zamanda tasarruf edip kodlamadan daha çok zevk alabileceksiniz. Daha fazla bilgi için SASS’ın sitesini ziyaret edebilirsiniz!

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir