Konu kısa hemen anlatıp bitireyim. zingat.com’da CSS önişlemcisi LESS. Boostrap’den dolayı LESS tercih edilmiş. Neyse soruna gelelim. Bir css fonksiyonunu (mixin) yazmaya karar verdim. Bir hareketli yükleniyor ikonu yapayım dedim. Herşey güzel gidiyordu ta ki değerini 24px değilde 24 olarak göndereyim dediğimde sorun ortaya çıktı.

.loading(24, @color-secondary, @color-primary)

Sonra bu değeri alıp css fonksiyonununda kullandığımda,

&:before,
&:after {
  font-size: @size + 'px';
  box-sizing: border-box;
  content: '';
  position: fixed;
  border-radius: 50%;
  border: solid .6em;
  animation: rotation 1s linear infinite;
}

ilk aklıma gelen yazım font-size: @size + 'px' şekli oldu. Yok olmadı. sonra font-size: @size+px oda olmadı. Bide font-size: @size+0px denedim olmadı.

Sonra dedim niye bunu ağaya sormuyorum. stackoverflow’da aradığım ikinci sonuç beni çözüme ulaştırdı.

Çözüm:

&:before,
&:after {
  font-size: (@size*1px);
  box-sizing: border-box;
  content: '';
  position: fixed;
  border-radius: 50%;
  border: solid .6em;
  animation: rotation 1s linear infinite;
}

çözüm bu font-size: (@size*1px); değişkeni 1px ile çarpmak. Aynı şeyi çıkarma (-1px) içinde yapabiliyoruz.

Bu arada loading css fonksiyonunu görmek isteyenler için kod burada https://gist.github.com/fatihhayri/baf7e0234df785d49d4b20fb3558d302 daha geliştirilmesi gerekiyor ama neyse şimdilik bu kadar.

Kalın sağlıcakla.

Kaynaklar

Sublime Text'te dosya tipine göre hızlı erişim

Son haftalarda Visual Studio Code ile kod yazıyorum. Güzel yanları var ama Sublime Text'in hızını bulamadım. Henüz Sublime'a geri dönmüş ...… Devamını oku

Responsive design patterns principles

13 January 2017 tarihinde yayınlandı.

jQuery DOM manipülasyonu metotlarında callback kullanmak

12 January 2017 tarihinde yayınlandı.