Wie man ein Farbschema für Unterseiten macht

Ich habe eine Frage, wie man eine schlaue Art, ein Thema irgendwie zu machen, einrichtet. Ich arbeite mit Bootstrap 3.3.7 und weniger. Die Herausforderung ist dies:Wie man ein Farbschema für Unterseiten macht

Ich habe eine Unternehmens-Website mit drei Abteilungen. Jede Abteilung hat ihre eigene Farbe. Diese Farbe wird im Logo und auf den Links und möglicherweise auf anderen Elementen verwendet.

Das Unternehmen hat einige Grundgestaltungen, aber wenn der Besucher zu einer der Warengruppen-Webseiten navigiert, sollte die Farbe des Logos und der Links zu den Abteilungsfarben wechseln.

Sag mal, sind die Regeln wie folgt aus:

Grundfarbe = schwarz
dept_one = red
dept_two = grün
dept_three = orange

Wie kann das sein Einrichten mit weniger und Variablen?

Technisch gesehen, beim Laden einer der Seiten der Unterabteilung wird dem <body> Tag eine "Abteilungsklasse" hinzugefügt, also suche ich nach einer ordentlichen Methode, um weniger zu strukturieren, um nur die Farben zu ändern.

Also, wenn ich diesen HTML haben:

<body class="dept_one">

dann würde Ich mag Lage sein zu tun:

a { 
    color: @link-color; 
}

die

produzieren

a { 
    color: red; 
}

und

<body class="dept_two">

noch

a { 
    color: @link-color; 
}

die in diesem Fall produzieren mit

a { 
    color: green; 
}

und so weiter ...

Die Lösung, die wir heute haben, ist, dass eine bestimmte Abteilung Sheet geladen wird, die überschreibt das Basisstyling, aber ich möchte mich von diesem Ansatz entfernen. Ich hatte gehofft, dass mit weniger würde es eine clevere Möglichkeit, dies zu tun, wie ein Mixin, die diese Farbvariablen generieren wird?

Quelle

2016-08-10 Meek

Sie Bild für Logo –

Ja verwendet haben schaffen können, ich ‚didn Geben Sie an, dass es sich um die Hintergrundfarbe handelt - hinter dem Bild.Aber theoretisch möchte ich diese Farbvariable überall verwenden können, und es würde die richtige Abteilungsfarbe ergeben. :-) – Meek

Können Sie verschiedene Stylesheets für jede Abteilungsseite verwenden? – 3rdthemagical

Hier ist ein einfaches Beispiel, Sample Pen Sie Ihre eigene Art, wie diese

HTML

<div class="dep-one"> 
<a href="#"> Click here </a> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p> 
</div> 
<div class="dep-two"> 
    <a href="#"> Click here </a> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p> 
</div> 
<div class="dep-three"> 
    <a href="#"> Click here </a> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p> 
</div>

WENIGER

@dep-one: red; 
@dep-two: green; 
@dep-three: orange; 

.dep-one { 
    color: @dep-one; 
    a { 
    color: @dep-one; 
    } 
} 
.dep-two { 
    color: @dep-two; 
    a { 
    color: @dep-two; 
    } 
} 
.dep-three { 
    color: @dep-three; 
    a { 
    color: @dep-three; 
    } 
} 
div { 
    padding: 10px; 
    text-align: center; 
}

Quelle

2016-08-10 12:16:43

Das ist eine gute Lösung. Vielen Dank. – Meek

Gern geschehen :) –

Wie man ein Farbschema für Unterseiten macht

Antwort

Verwandte Themen