css - mixin - sass variables ionic

Establece una variable en Sass dependiendo del selector

Question

Tengo un sitio web que utiliza unos cuantos colores ''principales'' diferentes. El diseño HTML general se mantiene igual, solo cambian los colores dependiendo del contenido.

Me preguntaba si podría establecer una variable de color dependiendo del selector de CSS. De esta manera puedo crear un tema para mi sitio web con algunas variables y dejar que Sass complete los colores.

Por ejemplo:

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

Estaba pensando en usar una mezcla para esto, pero me preguntaba si hay una mejor manera de hacer esto, ¿con una función tal vez? No soy tan bueno con Sass, por lo que cualquier ayuda sería apreciada.

Answer 1

ACTUALIZACIÓN: ¡su 2017 y sus variables funciona!

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

Answer 2

Creo que una mixin es la respuesta. ( Como escribí , las variables no funcionarán.)

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

Ese SCSS compila a este CSS:

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

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

Si desea agrupar los valores de color en su archivo SCSS, puede usar variables junto con la mezcla:

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

Answer 3

Si no desea usar una variable para cada color, puede usar una variable para todo tipo de colores. En el mixin puedes elegir el color correcto con nth . Por ejemplo, si escribe el índice del color como 1 , obtendrá el primer color en la variable de color.

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

Answer 4

Si realmente desea obtener hacky, también puede definir sus diferentes esquemas de color en una sola variable como $scheme1: class1 #333 #444 , donde el primer valor siempre es el nombre, y eso es seguido por todos los colores en ese esquema.

A continuación, puede utilizar @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);
  }
}

Esto compilará para:

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

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

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

Obviamente, si no desea combinar body.class1 y .content en sus selectores, solo puede especificar un content($main, $default) mezcla content($main, $default) y llamarlo dentro de @each utilizando nth como en el código anterior, pero el punto es que no tienes que escribir una regla para cada una de tus clases.

EDITAR Hay muchas respuestas interesantes sobre la creación o la referencia dinámica de variables en Sass y Merge string y variable a una variable con SASS .

Answer 5

Simplemente puede anular sus variables scss dentro del contenedor de clase:

$color1: red;
$color2: yellow;

header { background: $color1; }

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

Parece funcionar para mi.

Answer 6

También puede crear una mezcla que utilice el selector padre y comercial. http://codepen.io/juhov/pen/gbmbWJ

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