CSS’de rem’leri kullanmanın en iyi yolu

Genellikle bizlere gelen yada bizlerin oluşturduğu tasarımlarda uzunluk birimi olarak pixel kullanılır/kullanırız. Peki bu tasarımları koda dökerken ? Eğer sizlerde benim gibi her pixel’i rem’e dönüştürmek için hesap makinesi kullanıyorsanız ne kadar yorucu bir işlem olduğunu kesinlikle biliyorsunuzdur. Bugün bu yazıyla birlikte hesap makinesi kullanımını bitiriyor olacağız.

Bu işlemler için SCSS kullanıyor olacağız.

$base-size: 16; // Tarayıcılarda genellikle font-size: 16; 
@function size($target, $context: $base-size) {
  @return ($target / $context) * 1rem;
}

Örnek kullanım için: