Я искал то же самое и столкнулся с этим. На ваш вопрос ответили, но это не решило проблему.

Вот решение: http://codepen.io/monsto/pen/tiokl

Если ваш HTML был таким:

    <div class="main">
      <header class="header">
        <div class="warning">
          <p><strong>Danger,</strong> Will Robinson!</p>
        </div>
      </header>
    </div>

Затем с помощью SASS вы можете сделать это:

$bg: #f88;

@mixin colorize {
  $bg: darken($bg,15%) !global; // !global flag required for 3.4 or later, remove if using 3.3 or older
  background: $bg;
}

.warning {
  background: $bg;
  p {
    @include colorize;
    strong {
      @include colorize;
    }
  }
}

SASS, похоже, не имеет представления о результатах своей работы. Следовательно, inheritничего не значит для него. Вы в основном просите, чтобы он знал, что вывод, прежде чем он выводится.

Однако он знает, что это переменные, так как по умолчанию они тесно связаны. Из документов:

Переменные доступны только на уровне вложенных селекторов, где они определены. Если они определены вне вложенных селекторов, они доступны везде.

И ТОГДА переменные в миксинах:

Блок содержимого, переданный в миксин, оценивается в области, в которой определен блок, а не в области миксина.

Это позволяет вышеуказанному миксину взять известную переменную, определенную на родительском уровне, и переопределить ее для текущего уровня и сделать доступной для ее дочерних элементов. Это как делать $x = $x + 1внутри многоуровневого цикла

_{TBPH, это скорее меняет мой взгляд на SASS. Это явно намного более программно, чем я думал.}

Учитывая, что элемент не может иметь несколько одинаковых свойств, которые объединяются, и тот факт, что inheritне может знать, каково текущее состояние рендеринга, ваши варианты:

1) Следите за прошлыми трансформациями, используя переменные SASS: Демо

.parent {
  $firstTrans: translateX(50%);
  transform: $firstTrans;

  .child {
    /* Old followed by new */
    transform: $firstTrans rotate(10deg);
  }
}

2) Примените преобразование к родителю (возможно, добавив другой контейнер при необходимости): Демо

3) Используйте Javascript, чтобы объединить текущее преобразование с тем, которое вы хотите добавить (это единственный способ убедиться, что вы можете удалить преобразование, примененное к родителю, если это необходимо): Демонстрация

Примечание . Этот ответ получен из объединенного сообщения из-за этого мета-сообщения .

Этот ответ darkenконкретно касается функции: возможной альтернативой является использование brightness()фильтра CSS вместо функции SASS (или LESS) darken(). Вам нужно будет обернуть цвет внутри spanтега, чтобы фильтр не влиял на другие элементы.

Простая демонстрация:

.red {color: red}
.blue {color: blue}
.green {color: green}

span {
  display: inline-block;
  padding: 1em;
}

.darken span {
  -webkit-filter: brightness(0.4);
  filter: brightness(0.4);
}

<span class="red">Red</span>
<span class="blue">Blue</span>
<span class="green">Green</span>

<div class="darken">
  <span class="red">Red</span>
  <span class="blue">Blue</span>
  <span class="green">Green</span>
</div>

jsFiddle: https://jsfiddle.net/azizn/hhorhz9s/

Вы должны иметь в виду совместимость браузера, он должен работать для IE Edge, последних версий Firefox и Chrome. См. Caniuse или MDN для получения дополнительной информации.

В случае затемнения фона, вы можете использовать псевдоселектор с непрозрачностью или добавить полупрозрачный черный фоновый рисунок PNG.