Sass - манипулировать наследственной собственностью?

sass

18950 просмотра

4 ответа

Возможно ли в Sass манипулировать значением, которое данный элемент уже наследует?

Я стремлюсь к чему-то вроде этого:

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)
Автор: Design by Adrian Источник Размещён: 12.11.2019 09:21

Ответы (4)


23 плюса

Решение

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

Нет. Sass не «знает», от какого селектора унаследовать цвет. Он должен был знать, что 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>

Переменные CSS

Генерация CSS-переменных примерно так же близка к возможности манипулировать унаследованным свойством. Поддержка браузера еще не совсем доступна (проверьте caniuse ), но вот как это будет выглядеть:

Sass:

ul {
  --list-color: orange;
  --darker-color: darken(orange, 15%);
  color: var(--list-color);
}

ol {
  --list-color: green;
  --darker-color: darken(green, 10%);
  color: var(--list-color);
}

li {
  background: var(--darker-color);
}

Выход:

ul {
  --list-color: orange;
  --darker-color: #b37400;
  color: var(--list-color);
}

ol {
  --list-color: green;
  --darker-color: #004d00;
  color: var(--list-color);
}

li {
  background: var(--darker-color);
}
<ul>
  <li>Foo</li>
</ul>

<ol>
  <li>Bar</li>
</ol>

Если вы используете браузер, который поддерживает переменные CSS, результат должен выглядеть следующим образом:

введите описание изображения здесь

Автор: cimmanon Размещён: 17.02.2013 12:59

9 плюса

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

Вот решение: 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. Это явно намного более программно, чем я думал.

Автор: monsto Размещён: 12.09.2013 07:05

9 плюса

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

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

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

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

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

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

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

Автор: Zach Saucier Размещён: 24.01.2014 03:57

0 плюса

Этот ответ 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.

Автор: Aziz Размещён: 10.04.2016 03:04
Вопросы из категории :
32x32