LESS Karışımlarını ve Parametrelerini Basitleştirin

İşlenmiş CSS'nin doğru olması gerekiyor mu? LESS Karışımlarını ve Parametrelerini Basitleştirin

Ben o sınıf adı dayalı bir url atamak Bu sınıfta <span class="icon-login">

kullanarak bir düğme simgesi kütüphane kurmaya çalışıyorum. Benim daha az kod mixin geçerli:

.icon-finder(@url){ 
    background-image: url("..images/icons/backend/@{url}-icon-36.png"); 
    background-position: center center; 
}

@url parametre benim varlıklarda simge adını getirir. Ancak bu karışımı kullanmak için örneklerin LOADS'ını oluşturmam gerekiyor.

.icon-analytics{ 
    .icon-finder(analytics); 
} 
.icon-logout{ 
    .icon-finder(logout); // Pointing to logout.png 
} 
etc etc

Ve bu zaman kaybı gibi görünüyor. Bu süreci basitleştirmenin herhangi bir yolu var mı? Çünkü her sınıfa küçük bir 'simge asistanı' olmayı çok isterim. Teşekkürler!

kaynak

2016-04-04 Jonah M

Bana oldukça hoşgörülü görünüyor. Belki [Yazı Başarısı] (https://fortawesome.github.io/Font-Awesome) nasıl yapıyor? – Steve

[this] gibi bir şey mi arıyorsunuz? (Http://lesscss.org/less-preview/#%7B%22less%22%3A%22%40icons%3A%20analytics%2C%20logout%2C%20login%3B % 5Cn.icon karşılaştırmada (% 40index)% 20when% 20 (% 40index% 20% 3E% 200),% 7B% 5Cn% 20,% 20,% 40icoType% 3A% 20extract (% 40icons% 20% 40index 2C%)% 3B % 5Cn% 7B% 5Cn% 20,% 20,% 20,% 20background görüntü% 3A% 20url (% 5C% 22..images% 2Ficons% 2Fbackend% 2F,% 40,% 20,% 20.icon-% 40% 7BicoType% 7D% 7BicoType% 7D-simge-36.png% 5C% 22),% 3B% 5Cn% 20,% 20,% 20,% 20background-konumu,% 3A% 20center% 20center% 3B% 5Cn% 20% 20% 7D% 5Cn% 20,% 20 . bulucu (% 40 index% 20-% 201)% 3B% 5Cn% 7D% 5Cn.Konuk bulucu (uzunluk (% 40icons))% 3B% 22% 7D) döngüler kullanarak? – Harry

Döngüler bir çözümdür, ancak HTML'nin CSS oluşturulmasında okunduğundan, en azından "analitik", "çıkış" adlarını daha az bildirerek bildirmekten kaçınmayacaksınız. Başka bir çözüm javascript kullanmak olabilir ama overkill görünüyor. –

Dizinin üzerine döngü yapmak size yardımcı olacaktır.

Eksi:

.icon-finder(@url){ 
    background-image: url("..images/icons/backend/@{url}-icon-36.png"); 
    background-position: center center; 
} 

@icons: analytics, logout; 

.make-icons(@i: length(@icons)) when (@i > 0) { 
    .make-icons(@i - 1); 

    @icon: extract(@icons, @i); 
    [email protected]{icon} { 
     .icon-finder(@icon); 
    } 
} 

.make-icons(); // run the mixin

Css:

.analytics { 
    background-image: url("..images/icons/backend/analytics-icon-36.png"); 
    background-position: center center; 
} 
.logout { 
    background-image: url("..images/icons/backend/logout-icon-36.png"); 
    background-position: center center; 
}

Teşekkür to.

kaynak

2016-04-04 12:18:09 3rdthemagical

LESS Karışımlarını ve Parametrelerini Basitleştirin

cevap

İlgili konular