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:599 плюса
Я искал то же самое и столкнулся с этим. На ваш вопрос ответили, но это не решило проблему.
Вот решение: 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:059 плюса
Учитывая, что элемент не может иметь несколько одинаковых свойств, которые объединяются, и тот факт, что 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:570 плюса
Этот ответ 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Вопросы из категории :
- sass Как я могу процитировать строки в SASS?
- sass Создание Sass Mixin с необязательными аргументами
- sass Есть ли SASS.js? Что-то вроде LESS.js?
- sass Можно ли импортировать весь каталог в sass, используя @import?
- sass Escape # in SASS
- sass Использование сжатого вывода Sass при оставлении заголовка комментария к теме для Wordpress
- sass В чем разница между SCSS и Sass?
- sass Проблемы с Ruby 1.9 и Sass. (от ASCII-8BIT до UTF-8)
- sass Sass Invalid CSS Error: «ожидаемое выражение»
- sass Создание или обращение к переменным динамически в Sass
- sass Сделать обратное вложение в scss?
- sass Использование переменных Sass с медиазапросами CSS3
- sass sass css: целевой родительский класс от дочернего
- sass sass-rails helpers «image-url», «asset-url» не работают в рельсах 3.2.1
- sass Is there a way to import variables from javascript to sass or vice versa?
- sass Eclipse плагин для автоматической компиляции файлов Sass
- sass Including another class in SCSS
- sass Как мне запустить Ruby Gem?
- sass Что значит '&.' в '& .sub-title' указывает на scss?
- sass CSS Framework, который автоматически обрабатывает префиксы поставщиков?