Как я могу включить миксин, который содержит переменную, а затем изменить значение этой переменной внутри родительского комбинатора? - PullRequest
Новая
       21

Как я могу включить миксин, который содержит переменную, а затем изменить значение этой переменной внутри родительского комбинатора?

0 голосов
/ 05 февраля 2019

ОБНОВЛЕНИЕ: рабочий CodePen с решением для переменных css.

ОБНОВЛЕНИЕ: CSS-трюки объясняют , что каскадные переменные css каскадируются,и браузер перекрашивается при их измененииПеременные препроцессора не имеют этих функций.

Трудно выразить это ясно: возможно ли в Sass перезаписать глобальную переменную локальной переменной после того, как указанная глобальная переменная была включена черезмиксин?

То есть: я ищу установить значение по умолчанию для глобальной переменной $color и установить значения для определенных переменных цвета, таких как $red: red; и $blue: blue;.Затем используйте global $color внутри mixin, затем @include, который mixin внутри .class {}, затем перезапишите значение global $color локальными переменными внутри родительских комбинаторов, такими как .class { &.one { $color: $red; } &.two { $color: $blue; }}

Исходное значениеglobal $color - это рендеринг, а не переход к значениям локальных переменных.Я исследовал !default и !global, но не нашел много полезного в моем случае.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Я думаю, что это не сработает, потому что в тот момент, когда вы определяете background-color значение $color, становится черным, поэтому все фигуры черные.На следующем шаге компилятор считывает новое значение $color в разных дочерних классах, но эти значения никогда не были переназначены на background-color.Это будет работать, если вы переназначите его так: 

body {
  padding: 1rem;
  width: 1000px;
  margin: 0 auto;
}

$color: #000000;
$blue: #0087ff;
$red: #ff2828;
$yellow: #ffe607;

@mixin item {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  width: 8rem;
  height: 8rem;
  border-radius: 4px;
  background-color: $color;
}

@mixin circle {
  border-radius: 50%;
}

.item {
  @include item;
  background-color:$color;

  &.one {
    $color: $blue ;
    background-color: $color;
  }

  &.two {
    $color: $red;
    background-color: $color;
    @include circle;
  }

  &.three {
    $color: $yellow;
    background-color: $color;
    @include circle;
  }
}

или сделайте это как Temani

0 голосов
/ 05 февраля 2019

Звучит задание для переменной CSS: 

body {
  padding: 1rem;
  width: 1000px;
  margin: 0 auto;
}

$color: #000000;
$blue: #0087ff;
$red: #ff2828;
$yellow: #ffe607;

@mixin item {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  width: 8rem;
  height: 8rem;
  border-radius: 4px;
  background-color: var(--c,$color);
}

@mixin circle {
  border-radius: 50%;
}

.item {
  @include item;

  &.one {
    --c: #{$blue};
  }

  &.two {
    --c: #{$red};
    @include circle;
  }

  &.three {
    --c: #{$yellow};
    @include circle;
  }
}

Полный скомпилированный код: 

body {
  padding: 1rem;
  width: 1000px;
  margin: 0 auto;
}

.item {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  width: 8rem;
  height: 8rem;
  border-radius: 4px;
  background-color: var(--c, #000000);
}
.item.one {
  --c: #0087ff;
}
.item.two {
  --c: #ff2828;
  border-radius: 50%;
}
.item.three {
  --c: #ffe607;
  border-radius: 50%;
}
<body>
  <div class="item one"></div> <!-- blue square -->
  <div class="item two"></div> <!-- red circle -->
  <div class="item three"></div> <!-- yellow circle -->
</body>
...