LESS Mixins und Parameter vereinfachen

Verarbeitete CSS soll prägnant sein, oder?LESS Mixins und Parameter vereinfachen

Ich versuche, ein Button-Symbol-Bibliothek zu bauen <span class="icon-login">

In dieser Klasse mit ich es eine URL basierend auf dem Klassennamen zuweisen. Mein weniger Code mixin ist:

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

Der @url Parameter holt das Symbol Namen in meinem Vermögen. Um diesen Mix zu verwenden, muss ich jedoch LOADS von Instanzen erstellen.

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

Und das scheint wie eine Verschwendung von Zeit. Gibt es eine Möglichkeit, diesen Prozess zu vereinfachen? Weil ich gerne einen kompakten kleinen "Icon Assigner" für jede Klasse hätte. Danke!

Quelle

2016-04-04 Jonah M

Scheint ziemlich prägnant für mich. Vielleicht sehen Sie sich an, wie [Font Awesome] (https://fortawesome.github.io/Font-Awesome) das macht? – Steve

Suchst du etwas wie [this] (http://lesscss.org/less-preview/#%7B%22less%22%3A%22%40icons%3A%20analytics%2C%20logout%2C%20login%3B % 5Cn.icon-finder (% 40index)% 20wenn% 20 (% 40index% 20% 3E% 200)% 7B% 5Cn% 20% 20% 40icoType% 3A% 20extrakt (% 40icons% 2C% 20% 40index)% 3B % 5Cn% 20% 20.icon-% 40% 7BicoType% 7D% 7B% 5Cn% 20% 20% 20% 20 Hintergrundbild% 3A% 20url (% 5C% 22..images% 2Ficons% 2Fbackend% 2F% 40% 7BioTyp% 7D-icon-36.png% 5C% 22)% 3B% 5Cn% 20% 20% 20% 20Hintergrundposition% 3A% 20center% 20center% 3B% 5Cn% 20% 20% 7D% 5Cn% 20% 20 .icon-finder (% 40index% 20-% 201)% 3B% 5Cn% 7D% 5Cn.icon-finder (Länge (% 40icons))% 3B% 22% 7D) mit Schleifen? – Harry

Loops sind eine Lösung, aber Sie werden nicht vermeiden, mindestens die "analytics", "logout" Namen in den weniger Teilen zu deklarieren, da der HTML-Code bei der CSS-Erstellung nicht gelesen wird. Eine andere Lösung wäre, JavaScript zu verwenden, aber es sieht übertrieben aus. –

Loop über ein Array wird Ihnen helfen.

Abzüglich:

.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; 
}

Dank to.

Quelle

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

Antwort

Verwandte Themen