web-dev-qa-db-fra.com

Définir une variable dans Sass en fonction du sélecteur

J’ai un site Web qui utilise quelques couleurs «principales» différentes. La disposition HTML générale reste la même, seules les couleurs changent en fonction du contenu.

Je me demandais si je pouvais définir une variable de couleur en fonction du sélecteur CSS. De cette façon, je peux thématiser mon site avec quelques variables et laisser Sass remplir les couleurs.

Par exemple:

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

Je pensais utiliser un mixin pour cela, mais je me demandais s’il y avait une meilleure façon de faire cela - avec une fonction peut-être? Je ne suis pas très bon avec Sass, alors toute aide serait la bienvenue.

cssvariablessass
21
Jrn

Je pense qu'un mixin est la réponse. ( Comme je l'ai écrit , les variables ne fonctionneront pas.)

@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);
}

Ce SCSS compile dans this CSS:

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

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

Si vous souhaitez regrouper les valeurs de couleur dans votre fichier SCSS, vous pouvez utiliser des variables conjointement avec le mixin:

$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

Si vous voulez vraiment vous hacky, vous pouvez également définir vos différents schémas de couleurs dans une seule variable comme $scheme1: class1 #333 #444, où la première valeur est toujours le nom, suivi de toutes les couleurs de ce schéma.

Vous pouvez ensuite utiliser @each:

// 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);
  }
}

Cela compilera pour:

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

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

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

Évidemment, si vous ne voulez pas combiner body.class1 et .content dans vos sélecteurs, vous pouvez simplement spécifier un mixin content($main, $default) et l'appeler dans le @each à l'aide de nth comme dans le code ci-dessus, mais le fait est que vous n'avez pas pour écrire une règle pour chacune de vos classes.

EDIT Il y a beaucoup de réponses intéressantes sur Création ou référencement dynamique de variables dans Sass et Fusionner la chaîne et variable à une variable avec SASS .

9
Elise

UPDATE: son 2017 et les variables ne fonctionne pas!

@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

Vous pouvez également créer un mélange utilisant le sélecteur parent esperluette. http://codepen.io/juhov/pen/gbmbWJ

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

Si vous ne souhaitez pas utiliser une variable pour chaque couleur, vous pouvez utiliser une variable pour tous les types de couleurs. Dans le mixin, vous pouvez choisir la bonne couleur avec nth . Par exemple, si vous écrivez l'index de la couleur sous la forme 1, vous obtenez la première couleur de la variable de couleur.

$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

Vous pouvez simplement remplacer vos variables scss à l'intérieur du wrapper de classe:

$color1: red;
$color2: yellow;

header { background: $color1; }

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

Semble travailler pour moi.

0
Don Townsend