webentwicklung-frage-antwort-db.com.de

Stellen Sie eine Variable in Sass ein, abhängig vom Selektor

Ich habe eine Website, die einige verschiedene "Hauptfarben" verwendet. Das allgemeine HTML-Layout bleibt unverändert, nur die Farben ändern sich je nach Inhalt.

Ich habe mich gefragt, ob ich je nach CSS-Selector eine Farbvariable setzen kann. Auf diese Weise kann ich meine Website mit ein paar Variablen gestalten und Sass die Farben füllen lassen.

Zum Beispiel:

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  color-default: $color-1;
  color-main: $color-2;
}
body.class-2 {
  color-default: $color-3;
  color-main: $color-4;
}

/* content CSS */
.content {
  background: $color-default;
  color: $color-main;
}

Ich habe darüber nachgedacht, ein Mixin dafür zu verwenden, aber ich habe mich gefragt, ob es einen besseren Weg gibt, dies zu tun - vielleicht mit einer Funktion? Ich bin mit Sass nicht so gut, also wäre jede Hilfe dankbar.

21
Jrn

Ich denke ein mixin ist die Antwort. ( Wie ich geschrieben habe funktionieren Variablen nicht.)

@mixin content($color-default, $color-main) {
  background: $color-default;
  color: $color-main;
}

body.class-1 {
  @include content(#444, #555);
}

body.class-2 {
  @include content(#666, #777);
}

Das SCSS kompiliert zu diesem CSS:

body.class-1 {
  background: #444444;
  color: #555555; }

body.class-2 {
  background: #666666;
  color: #777777; }

Wenn Sie die Farbwerte in Ihrer SCSS-Datei zusammenfassen möchten, können Sie Variablen in Verbindung mit dem Mixin verwenden:

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  @include content($color-1, $color-2);
}

body.class-2 {
  @include content($color-3, $color-4);
}
21
Rory O'Kane

Wenn Sie wirklich abgehackt sein möchten, können Sie Ihre verschiedenen Farbschemata auch in einer einzigen Variablen wie $scheme1: class1 #333 #444 definieren, wobei der erste Wert immer der Name ist und darauf alle Farben in diesem Schema folgen.

Sie können dann @each verwenden:

// Define your schemes with a name and colors
$scheme1: class1 #444 #555;
$scheme2: class2 #666 #777;
$scheme3: class4 #888 #999;

// Here are your color schemes
$schemes: $scheme1 $scheme2 $scheme3;

@each $scheme in $schemes {
  // Here are the rules specific to the colors in the theme
  body.#{nth($scheme, 1)} .content {
    background-color: nth($scheme, 2);
    color: nth($scheme, 3);
  }
}

Dies wird kompiliert um:

body.class1 .content {
  background-color: #444444;
  color: #555555; }

body.class2 .content {
  background-color: #666666;
  color: #777777; }

body.class4 .content {
  background-color: #888888;
  color: #999999; }

Wenn Sie body.class1 und .content nicht in Ihren Selektoren kombinieren möchten, können Sie einfach ein Mixin content($main, $default) angeben und es im @each mit nth wie in aufrufen der obige Code, aber der Punkt ist, dass Sie nicht müssen , um eine Regel für jede Ihrer Klassen zu schreiben.

EDIT Es gibt viele interessante Antworten zu Variablen dynamisch in Sass erstellen oder referenzieren und String und zusammenführen) Variable in eine Variable mit SASS .

9
Elise

UPDATE: 2017 und Variablen funktionieren!

@mixin Word_font($page) {
  @font-face {
    font-family: p#{$page};
    src: url('../../static/fonts/ttf/#{$page}.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .p#{$page} {
   font-family: p#{$page};
  }
}

// Loop and define css classes 
@for $i from 1 through 604 {
 @include Word_font($i);
}
1
Naveed

Sie können auch eine Mischung erstellen, die die übergeordnete Auswahl für kaufmännisches Und verwendet. http://codepen.io/juhov/pen/gbmbWJ

@mixin color {
  body.blue & {
    background: blue;
  }
  body.yellow & {
    background: yellow;
  }
}
1
Juho Valtonen

Wenn Sie nicht für jede Farbe eine Variable verwenden möchten, können Sie eine Variable für alle Arten von Farben verwenden. Im Mixin können Sie mit nth die richtige Farbe auswählen. Wenn Sie beispielsweise den Index der Farbe als 1 schreiben, erhalten Sie die erste Farbe in der Farbvariablen.

$colors: #444, #555, #666, #777;

@mixin content($color-default-num, $color-main-num) {
  background: nth($colors, $color-default-num);
  color: nth($colors, $color-main-num);
}

body.class-1 {
  @include content(1, 2);
}
1
Tim Hartmann

Sie können Ihre scss-Variablen einfach innerhalb des Klassenwrappers überschreiben:

$color1: red;
$color2: yellow;

header { background: $color1; }

.override-class {
  $color1: green;
  header { background: $color1; }
}

Scheint für mich zu arbeiten.

0
Don Townsend

Für mich bestand die eindeutige Antwort auf mein Problem darin, eine Karte mit Karten zu erstellen und diese wie folgt zu durchlaufen:

$pallettes: (
  light-theme: (
    container-color: red,
    inner-color: blue,
  ),
  dark-theme: (
    container-color: black,
    inner-color: gray,
  ),
);

@each $pallette, $content in $pallettes {
  .main.#{$pallette} {
    background-color: map-get($content, container-color);
    .inner-div {
      background-color: map-get($content, inner-color);
    }
  }
}
0
Francesco Meli