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

Google Chrome Developer Tools ile kullanılmayan CSS kodlarını bulmak

Performans hiç olmadığı kadar önemli bir hale geldi. Google'un arama sonuç sıralamasındaki en büyük etkenlerden birinin site hızı olduğun...… Devamını oku

Web Geliştiriciler İçin Editör Seçimi

13 February 2018 tarihinde yayınlandı.

iOS Simülatör ile Mobil Safari'de Hata Ayıklama

08 February 2018 tarihinde yayınlandı.