Публикации по теме 'css-variables'
Работа с переменными CSS
Краткое руководство по переменным CSS и основам их использования.
Вы когда-нибудь устали повторно использовать кучу свойств CSS снова и снова в большом проекте? Или, что еще хуже, менять каждого из них, когда его об этом просят? На протяжении десятилетий это было большой проблемой для веб-разработчиков, что привело к тому, что мы перешли на препроцессоры, такие как SASS. Уже нет! CSS теперь предоставляет переменные изначально без необходимости повышения уровня для каких-либо..
Стилизация псевдоэлементов из запросов Javascript
CSS-переменные в помощь
Время от времени нам нужно ориентироваться на элементы внутри компонента javascript и управлять их стилем. Распространенным вариантом использования является необходимость применения стиля к элементам на основе положения прокрутки или событий изменения размера. Достаточно просто запросить элементы, чтобы добавить классы или применить свойства стиля, но, к сожалению, мы можем применить эти стили только к возвращаемому элементу напрямую и не имеем доступа к..
JavaScript 30-Day 3 Study Notes
Еще один небольшой проект от Веса Боса, снова посвященный нескольким концепциям кодирования. Мне нравится, как Бос распределяет эти понятия в проектах. Это помогает увидеть, как они используются в реальном приложении.
В этом проекте использовались три ползунка для ввода изменений соответствующих переменных CSS, интервалов, размытия и основного цвета.
В «управляющем» div Бос написал HTML для каждого ввода. Вот код для интервала:
<label..
День 3 — CSS-переменные
Чему я научился на JavaScript 30 (веб-курс — https://javascript30.com/ )
Кодинг на Github
CSS-переменные
Переменные En-MDN:CSS Объявление переменной:
element { — main-bg-color: brown;
Использование переменной:
элемент { background-color: var( — main-bg-color);
Использование :root в качестве элемента может быть полезно для объявления глобальных переменных CSS .
:root{ — main-bg-color: brown;
Фильтр
Свойство filter определяет визуальные эффекты для..
Вопросы по теме 'css-variables'
Как я могу определить цвета как переменные в CSS?
Я работаю над довольно длинным файлом CSS. Я знаю, что клиент мог запросить изменения в цветовой схеме и задавался вопросом: можно ли назначить цвета переменным, чтобы я мог просто изменить переменную, чтобы новый цвет применялся ко всем элементам,...
247586 просмотров
schedule
09.08.2023
Как я могу определить поддержку переменных CSS с помощью JavaScript?
Последняя версия Firefox поддерживает переменные CSS , но Chrome, IE и множество других другие браузеры этого не делают. Должна быть возможность получить доступ к узлу DOM или написать небольшой метод, который возвращает, поддерживает ли браузер...
9750 просмотров
schedule
21.02.2023
Можно ли манипулировать переменными css с помощью LESS?
С переменными препроцессора легко настроить одну переменную и манипулировать ею, чтобы я мог использовать ее для установки нескольких свойств. ( демонстрация )
Экспериментируя с нативными переменными CSS , я заметил, что могу комбинировать их с...
373 просмотров
schedule
02.12.2022
css специфичность и css vars в полимере
Я использую полимер, и я думаю, что это но, но я не совсем уверен.
В моем основном документе у меня есть это:
<style is="custom-style">
:root {
--child-element-bg: #000;
--child-element-mixin: {
border:...
110 просмотров
schedule
24.03.2024
Новый способ записи значений переменных CSS по умолчанию в Polymer
Почему команда Polymer изменила способ определения значений переменных CSS по умолчанию в элементах Polymer? Ниже приведен пример:
Старый стиль
color: var(--my-value,--default-value);
Новый стиль
color:...
162 просмотров
schedule
03.08.2022
Собственные переменные CSS не работают в медиа-запросах
Я пытаюсь использовать переменные CSS в медиа-запросе, и это не работает.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
73917 просмотров
schedule
08.06.2023
Полимерные CSS-переменные не заменяются
Я унаследовал веб-приложение, созданное с использованием Polymer для внешнего интерфейса. Когда я запускаю различные команды Docker, они в основном работают, но есть некоторые проблемы с CSS. В частности, некоторые стили Polymer не скомпилированы....
125 просмотров
schedule
05.07.2022
Использование переменных CSS в качестве аргументов функции Sass
Есть ли способ использовать переменные CSS с функциями Sass, например. светлее? Что-то вроде этого:
:root {
--color: #ff00ff;
}
.div {
background-color: lighten(var(--color), 32%);
}
Я получаю сообщение об ошибке: «Аргумент $color из...
8673 просмотров
schedule
01.02.2023
Наследование и откат переменных CSS
Мой вопрос в том, почему переменные CSS должны были добавить концепцию отката, а не просто полагаться на наследование, как другие свойства CSS.
Например:
:root {
--color1: red;
}
body {
color: var(--color1);
}
body p {...
3343 просмотров
schedule
22.12.2023
Как скрыть определенные предупреждения JS
Мой предыдущий вопрос касается пользовательских свойств css, выдающих предупреждение в консоли. Поскольку никто, кажется, не знает ответа, есть ли способ просто скрыть предупреждения?
260 просмотров
schedule
12.05.2023
Gatsby.js css: настраиваемые свойства
Я установил gatsby cli и создал базовый проект node / gatsby.js. В руководстве говорится: « Gatsby работает с модулями CSS из коробки. ». Я также хотел использовать настраиваемые свойства css, как описано здесь:...
1790 просмотров
schedule
16.08.2022
Переменные CSS — замена значений?
У меня очень простая проблема с переменными CSS. Я хотел бы поменять местами две переменные CSS, в основном эквивалент CSS [a, b] = [b, a] в ES6. Вот простой пример:
<p>White background</p>
<button>Black...
374 просмотров
schedule
28.07.2023
Объедините CSS-переменные и calc()
Я хочу объединить CSS-переменные и calc(), но, как указано в этой теме раньше (у которого нет точного ответа) кажется, что проблема возникает, если вы делаете что-то вроде следующего:
--a: 1;
--b: 2;
--result: calc(var(--a) + var(--b));...
614 просмотров
schedule
29.08.2022
: root CSS-селектор внутри Shadow DOM
Почему переменные CSS (пользовательские свойства CSS), объявленные с помощью селектора :root внутри теневого DOM, не применяются?
let container = document.getElementById('container');
let shadow = container.attachShadow({mode: 'open'});...
59 просмотров
schedule
10.11.2022
Bootstrap 4 - ссылка на цвет по корневому имени в css
Я использую красивую тему Bootstrap 4 css, которая переопределяет тему по умолчанию с очень красивыми цветами, но я не могу «ссылаться» на цвет по его корневому имени из css.
Давайте объясним лучше, Bootstrap имеет некоторые корневые цвета, которые...
9481 просмотров
schedule
27.11.2022
Условные стили с настраиваемыми свойствами css
Мне нравится использовать настраиваемые свойства css , но есть одна вещь, которую я часто нахожу, что я бы хотел сделать.
Я хочу иметь возможность применять некоторые стили условно на основе значения пользовательского свойства css. Вот некоторый...
3998 просмотров
schedule
17.07.2022
Можно ли использовать переменные css внутри встроенного svg?
Я пишу пользовательский стиль для веб-сайта, я использую переменные css для настройки пользователем. Я пытаюсь использовать встроенный svg с переменной в нем, чтобы создать галочку, установленную на предпочтительный цвет акцента пользователя. Но,...
2209 просмотров
schedule
25.04.2023
Изменение пользовательского свойства CSS для унаследованного (цветного) значения не работает
У меня есть этот пример ниже, где .bar наследует color: var(--color); от своего родителя.
Если затем я переопределю --color на другой цвет в .bar , пользовательское свойство не обновится.
Может ли кто-нибудь объяснить, почему и что...
500 просмотров
schedule
17.12.2023
Это ошибка браузера? Наследование в переменных с цветом фона
Я обнаружил, что не могу заставить цвет фона наследовать цвет фона другого элемента при объявлении внутри функции переменной в css. Вот пример того, с чем я сталкиваюсь. Это ошибка?
div,span{
border: 1px solid black;
padding: 10px;...
116 просмотров
schedule
07.06.2022
Как каскадировать переменные rgba альфа-значения (внутри именованной переменной цвета)
Я использую переменные CSS для определения всех цветов на моей странице.
Затем переменная с именем --opac используется в альфа-канале каждого цвета для управления требуемым уровнем непрозрачности, если он отличается от значения по умолчанию,...
18 просмотров
schedule
18.06.2023
