Ответ 1

Наследование

Нет. Сасс не знает, какой селектор наследует цвет. Он должен был бы знать, что strong является потомком body. Это кажется достаточно разумным предположением для вас и для меня, так как strong не допускается за пределами тела, но такого рода предположение не может быть сделано относительно большинства селекторов. Сасс также должен был знать, что каскады не происходят из других элементов-предков.

ul {
    color: red;
}

ol {
    color: blue;
}

li {
    // which color do I inherit from ????
}

Ну, я могу указать, какой селектор я хочу скопировать?

Sass также не предоставляет доступ к значениям любых ранее объявленных переменных. Невозможно указать "быть темнее, чем цвет тела". Правила CSS не являются объектами или сопоставлениями и не доступны никоим образом. Ваш случай может быть простым, но рассмотрим более сложный случай, подобный этому:

.foo {
    background: mix(white, blue); // fallback for non-rgba browsers
    background: rgba(blue, .5);

    .baz & {
        background: yellow;
    }

    @media (min-width 30em) {
        background: orange;
    }

    @supports (flex-wrap: wrap) {
        background: red;
    }
}

.bar {
    // access which background color from .foo ????
}

Ну что я могу сделать?

Вам нужно будет использовать переменные или это должна быть функция ванильного CSS, чтобы делать то, что вы хотите.

Старомодный CSS

Некоторые свойства могут создавать иллюзию того, что они генерируются/унаследованы динамически, используя материалы, которые поддерживаются браузерами в течение многих лет:

ul.one {
  background: white;
}

ul.two {
  background: yellow;
}

ul {
  background: rgba(0, 120, 255, .2);
  padding: 1em;
}

<ul class="one">
  <li><ul>
    <li><ul>
      <li>Foo</li>
    </ul></li>
  </ul></li>
</ul>

<ul class="two">
  <li><ul>
    <li><ul>
      <li>Foo</li>
    </ul></li>
  </ul></li>
</ul>

Ответ 2

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

Здесь решение: 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 ничего не значит для него. Вы в основном просите его знать, что такое выход, прежде чем он выйдет.

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

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

И ТОГДА переменные в mixins:

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

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

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

Ответ 3

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

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

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

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

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

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

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

Ответ 4

В этом ответе конкретно рассматривается функция darken: Возможная альтернатива - использовать фильтр CSS brightness() вместо функции 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>