[CSS] Пользовательские переменные принимают вас так, как вам нравится, скин в один клик

CSS

Понимание пользовательских переменных CSS

Пользовательские свойства CSS? Звучит так потрясающе, атрибуты можно настраивать, разве нельзя играть свободно? Может ли обозреватель свойств, который я определяю, распознать его?

1. Основы

(1) Название и цель

На самом деле, существует множество псевдонимов для пользовательских свойств CSS, таких какCSS-переменные,собственная переменная,Пользовательские свойства CSS Каскадные переменные, которые все относятся к одному и тому же.

Когда дело доходит до переменных, все часто используют их в препроцессорах CSS, таких как SCSS\LESS, и у них есть несколько преимуществ:

1. Можно использовать цветовые переменные для унификации стиля;
2. Можно использовать согласованные свойства компонентов, включая компоновку и позиционирование;
3. Избегайте избыточности кода.

Итак, поскольку SCSS может что-то делать, что нам делать с этой так называемой пользовательской переменной CSS? Люди, естественно, имеют свою собственную уникальность.

1. Например, его можно переписать во время выполнения, которое является динамическим;
2. Например, удобно использовать JS для чтения и перезаписи;
3. Например, он может быть унаследован, компонуем и в то же время имеет область действия.

В этом отношении препроцессор полностью проигрывает пользовательским переменным CSS.

(2) Объявить переменные

Синтаксис очень прост, разделен на два шага,объявить переменнуюа такжеиспользовать переменные.

Объявите переменную с помощью--приставка.

:root{
    --*: xxxx;
    /* --variety-name: variety-value; */
}

Здесь следует отметить несколько моментов:

  1. :rootсоответствует HTML<html>элемент с наибольшим весом,:rootОбъявленная переменная является глобальной переменной;
  2. Пользовательские переменные CSS чувствительны к регистру,--colorа также--Colorдве переменные;
  3. Переменные должны быть объявлены в {}. Лучше запомнить, понимается ли здесь это как свойство. Ведь мы не будем писать свойства CSS вне круглых скобок;
  4. Знак * представляет собой имя, которое мы даем переменной. Это очень раздражает иметь имя. К счастью, есть несколько ограничений на имена переменных CSS, за исключением некоторых специальных ключевых символов, которые нельзя использовать.Обычно вы используете цифры/буквы/подчеркивания_/дефисы сказал, что китайский, японский и корейский также доступны.
:root{
    --黑色：#000;
}

body{
    background: var(--黑色);
}

Как бы дешево я ни пробовал, я действительно могу его узнать. Но, ради мира во всем мире, пожалуйста, пообещай мне не писать этого.

(3) Использование переменных

Это просто, это то, с чем мы знакомыvarключевые слова.

/* 定义变量 */
:root{
    --*: #000;
    /* 例如 --color-bg: #000; */
}

/* 使用变量 */
body{
    background: var(--*);
    /* 例如 background: var(--color-bg); */
}

Другой способ установить значение по умолчанию — добавить значение по умолчанию после имени переменной.

.div{
    background: var(--变量名称,[默认值]);
    /* 例如 background: var(--color-bg, #000); */
}

То есть, когда эта переменная не была объявлена, будет использоваться значение по умолчанию, и оно не будет потеряно.

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

p{
    background-color: var(--color, #000);
    /* --color没有声明过，所以这里的p元素背景颜色时候用了默认值#000 */
}

div{
    --color: 20px;
    background-color: var(--color, #000);
    /* 很明显，background-color: 20px;是有语法错误的，所以这里div的背景色为透明，取的是这个属性的默认值 */
}

(4) Объем и вес

1. Если вам нужно определить глобальную переменную, вы можете поместить ее в:rootниже корневого элемента;
2. Если вам нужно использовать его только для некоторых элементов/компонентов, определите его для соответствующего класса;
3, может дополнительно также быть в@mediaв медиазапросе или:hoverиспользуется в псевдоклассах.

После понимания области действия вес остается тем же, поскольку пользовательские переменные CSS могут быть унаследованы, поэтому вес такой же, как наше обычное понимание веса атрибута.

Вот пример великого бога Чжан Синьсюй, чтобы задать вам вопрос.

:root{
    --color: purple;
}
div{
    --color: green;
}
#alert{
    --color: red;
}
*{
    color: var(--color);
}

<p>请问我是什么颜色</p>
<div>请问我是什么颜色</div>
<div id="alert">
    请问我是什么颜色
    <p>请问我是什么颜色</p>
    <p style="--color: grey;">请问我是什么颜色</p>
</div>

Ответ таков:

(5) Другие комбинации переменных

В дополнение к некоторым из вышеперечисленных применений также могут использоваться пользовательские переменные CSS.calc()для выполнения вычислений или для выполнения конкатенации строк.

Здесь приведены три примера, а конкретные инструкции — в комментариях.

p{
    --fz: 50;
    font-size: var(--fz)px;
    /* 不要太天真，这样是错的 */
}

p{
    --fz: 50;
    font-szie: calc(var(--fz) * 1px);
    /* 如果你一定要这么用，可以使用calc计算函数 */
}

p::after{
    --text: "hellp";
    content: var(--text) " word";
    /* 但是字符串的拼接是可以实现的 */
}

Конечно, переменные можно использовать не только напрямую, но также можно передавать значение в другую переменную напрямую или путем вычисления.

p{
    --fz: 20px;
    --fz-lg: var(--fz);
    font-size: var(--fz-lg);
    /* 直接传递 */
}

p{
    --fz: 20px;
    --fz-lg: calc(var(--fz) * 1.5);
    font-size: var(--fz-lg);
    /* 通过计算后传递 */
}

2. Использование в JS

Читать: getPropertyValue()

Напишите: setProperty()

Например, вы:rootНа странице определена переменная цвета, чтобы установить цвет темы страницы, затем с помощью следующего JS вы можете просто изменить значение переменной цвета, чтобы изменить цвет темы страницы. Меняй скин, так просто.

// 读取数据
const rootStyles = getComputedStyle(document.documentElement);
const varValue = rootStyles.getPropertyValue('--color').trim();

// 改写数据
document.documentElement.style.setProperty('--color', value);

Конечно, это не только полезно для создания скинов, но и даст полную волю вашему воображению и посмотрите, какие замечательные эффекты может произвести комбинация переменных CSS и JS~ ПрикрепленоМаленькая демонстрация учителя Дамо.

Применение пользовательских переменных CSS

Так много было введено, так в каких сценариях применяются пользовательские переменные CSS?

1. CSS дзен-сад

Самое сильное приложение — это, конечно, скиннинг в один клик!

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

$theme-color: #f00;

button{
    background: $theme-color;
}

Наконец, скомпилируйте, чтобы получить настроенный файл CSS, например:

button{
    background: #f00;
}

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

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

Но если мы предоставляем общий продукт для доступа к разным партнерам, и сторонам доступа необходимо настроить тему, они могут выбрать препроцессор или пользовательские свойства CSS.

/* 预处理器方式，先定义不同的主题色 */
$theme-color-a: #f00;
$theme-color-b: #0f0;

/* 在页面层级最外层加上定制的类名，类名中所有样式都需要重新覆盖一遍 */
.project-a{
    button{
        background: $theme-color-a;
    }
    a{
        color: $theme-color-a;
    }
}
.project-b{
    button{
        background: $theme-color-b;
    }
    a{
        color: $theme-color-b;
    }
}

/* 或者在媒体查询中需要重置样式 */
$fz-sm: 12px;
$fz-md: 14px;

button{
    font-size: $fz-sm;
}
a{
    font-size: $fz-sm;
}

@media (min-width: 375px){
    button{
        font-size: $fz-md;
    }
    a{
        font-size: $fz-md;
    }
}

:root{
    --FZ: 12px;
}
/* 照常写一套样式 */
button{
    background: var(--THEME-COLOR, #fff);
}
a{
    color: var(--THEME-COLOR, #fff);
}

/* 根据不同的接入方设置主题色 */
.project-a{
    --THEME-COLOR: #f00;
}
.project-b{
    --THEME-COLOR: #0f0;
}

@media (min-width: 375px){
    :root{
        --FZ: 14px;
    }
}

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

При использовании настраиваемых свойств CSS решение должно быть максимально кратким и избегать копирования и вставки кода, потому что, пока вы переопределяете значение переменной, вам не нужно переопределять стиль один раз.

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

Вышеупомянутые два метода по-прежнему напрямую настраивают цвет темы в CSS. Однако, если вам нужно получить доступ к консоли управления и позволить партнеру напрямую установить цвет темы на консоли управления, статический метод препроцессора напрямую выйдет из конкуренции, и выйдет абсолютное преимущество пользовательских атрибутов CSS.

:root{
    --THEME-COLOR: #fff;
}
button{
    background: var(--THEME-COLOR);
}
a{
    color: var(--THEME-COLOR);
}

let value = #f00; //或者通过请求获取配置的主题色
document.documentElement.style.setProperty('--THEME-COLOR', value);

Третий метод очень гибкий, мы можем передать цвет темы партнера через консоль управления или другие методы настройки и применить его одним щелчком мыши.

Наступил исторический момент.Отныне доступ — дело нескольких минут, прямое чтение конфигурации консоли управления и изменение пользовательских свойств CSS. Приходите на небольшую демонстрацию, чтобы испытать это.

код спрей.IO/Apollo ZZ/PE…

Во-вторых, обработка цвета темы

Препроцессор предоставляет множество расширенных цветовых методов, с помощью которых можно добиться выделения, затемнения или обесцвечивания цвета и т. д.;

$color: #f00; 

.lighten{
    background: lighten($color,10%);
}
.darken{
    background: darken($color,10%);
}
.desaturate{
    background: desaturate($color,10%);
}

Результатом этой компиляции является

.lighten{
    background: #ff3333;
}
.darken{
    background: #cc0000;
}
.desaturate{
    background: #f20d0d;
}

Эти методы нельзя использовать непосредственно в пользовательских свойствах CSS, но мы можем настроить оттенок или яркость цвета темы с помощью rgb() или hsl().

(1) Используйте rgb для изменения цвета

Принцип осветления и затемнения цветов rgb относительно прост, просто измените--COLOR-R/--COLOR-G/--COLOR-BЗначение , используйте функцию calc для линейного увеличения или уменьшения значения rgb.

:root{
  --COLOR-R: 25;
  --COLOR-G: 153;
  --COLOR-B: 112;
  --DARKEN: 30; // 加深程度
  --LIGHTEN: 30; // 变亮程度
  --THEME-COLOR: rgb(var(--COLOR-R), var(--COLOR-G), var(--COLOR-B));
  --THEME-COLOR-DARKEN: rgb(calc(var(--COLOR-R) - var(--DARKEN)), calc(var(--COLOR-G)  - var(--DARKEN)), calc(var(--COLOR-B) - var(--DARKEN)));
  --THEME-COLOR-LIGHTEN: rgb(calc(var(--COLOR-R) + var(--LIGHTEN)), calc(var(--COLOR-G)  + var(--LIGHTEN)), calc(var(--COLOR-B) + var(--LIGHTEN)));
}

код спрей.IO/Apollo ZZ/PE…

(2) Используйте hsl, чтобы изменить цвет

Мы можем быть относительно знакомы с rgb, но hsl используется редко.Принцип hsl кратко представлен ниже.Для получения подробной информации, пожалуйста, нажмите на ссылку.

В отличие от трехцветного света, используемого RGB, HSL также использует три компонента для описания цвета: цвет HSL выражается как H (оттенок) оттенок, S (насыщенность) насыщенность и L (яркость) яркость.

Компонент H(hue) HSL представляет диапазон цветов, которые может воспринимать человеческий глаз. Эти цвета распределены по плоскому кругу оттенков. Диапазон значений — это центральный угол от 0° до 360°. Каждый угол может представлять цвета .

Компонент S (насыщенность) HSL относится к насыщенности цвета, который описывает изменение чистоты цвета при том же оттенке и светлоте со значением от 0% до 100%. Чем больше значение, тем меньше серого в цвете и тем ярче цвет, демонстрирующий переход от рационального (оттенки серого) к воспринимаемому (сплошной цвет).

Компонент L (яркость) HSL относится к яркости цвета, и его функция заключается в управлении светлыми и темными изменениями цвета. Он также использует диапазон значений от 0% до 100%. Чем меньше значение, тем темнее цвет, тем ближе к черному, чем больше значение, тем ярче цвет, тем ближе к белому.

Вообще говоря, нам нужно углубить цвет кнопки в состоянии наведения.Принцип применения в это время заключается в уменьшении L в значении hsl цвета, то есть яркости.

:root{
  --COLOR-H: 29;
  --COLOR-S: 100;
  --COLOR-L: 50;
  --DARKEN: 0.15;
  --THEME-COLOR: hsl(var(--COLOR-H), calc(var(--COLOR-S) * 1%), calc(var(--COLOR-L) * 1%));
  --THEME-COLOR-DARKEN: hsl(var(--COLOR-H), calc(var(--COLOR-S) * 1%), calc(var(--COLOR-L) * (1 - var(--DARKEN)) *  1%));
  --THEME-COLOR-LIGHTEN: hsl(var(--COLOR-H), calc(var(--COLOR-S) * 1%), calc(var(--COLOR-L) * (1 + var(--DARKEN)) *  1%));
}

код спрей.IO/Apollo ZZ/PE…

(3) Используйте маску, чтобы изменить цвет

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

.button_color{
    position: relative;
    color: #fff;
    background: var(--THEME-COLOR);
    border: 1px solid var(--THEME-COLOR);
    &:after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 0.2s;
    }
    /* 黑色半透明蒙层 */
    &:hover:after{
        background: rgba(0,0,0,0.05);
    }
    /* 白色半透明蒙层 */
    &.lighten:hover:after{
        background: rgba(255,255,255,0.1);
    }
}

код спрей.IO/Apollo ZZ/PE…

3. Совместимость

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

Сторона ПК — это, в основном, IE, хард-рок, в то время как мобильная сторона — это в основном недорогие модели, такие как ios9.2 и ниже / Android 4.4 и ниже, не поддерживаются, этой совместимости достаточно, чтобы мы могли начать использовать CSS в наши проекты Настройте свойства и уменьшите совместимость для некоторых младших версий.

Для неподдерживаемых браузеров доступны следующие методы совместимости:

Вариант 1. Задайте цвет по умолчанию напрямую

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

button{
    background: #F00;
    /* 默认颜色，若不支持CSS自定义属性则应用该默认颜色 */
    background: var(--THEME-COLOR, #F00);
    /* 在实践中发现有些机型虽然能识别到CSS自定义变量但是无法获取正确颜色，只能获取到默认值 */
}

Вариант 2: CSS оценивает совместимость и адаптацию в соответствии с @supports.

Младшие модели также не распознают @supports правильно, а совместимость @supports лишь незначительно лучше, чем пользовательские переменные CSS.

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

Вариант 3: js оценивает совместимость и адаптацию в соответствии с @supports

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported 引入支持自定义变量的CSS，允许更改CSS自定义变量 */
} else {
  /* not supported 引入兼容的CSS文件 */
}

В-четвертых, вопросы, требующие внимания

  1. В некоторых браузерах для сложных переменных CSScalc()операции могут не работать;
  2. провестиcalc()При вычислениях лучше указать значения по умолчанию:calc(var(--base-line-height, 0) * 1rem);
  3. Нельзя использовать в качестве значения медиа-запроса:
@media screen and (min-width: var(--desktop-breakpoint) ) { 
};
  1. адрес изображения, напримерurl( var(--image-url) ), не вступит в силу;
  2. Поскольку пользовательские переменные CSS чувствительны к регистру, для глобальных переменных рекомендуется использовать заглавные буквы.Помимо установки общего цвета темы, сведите к минимуму изменения глобальных переменных;
  3. Веб-сторона может устанавливать переменные, такие как цвет темы, в корневом элементе.htmlи измените значение пользовательского атрибута указанным выше способом;
  4. Поскольку апплет не может получить DOM, он не может напрямую изменить значение пользовательского атрибута CSS.Вы можете сбросить значение пользовательского атрибута, установив встроенный стиль для самого внешнего элемента страницы, например:
.container{
    --THEME-COLOR: #f00;
}

<view class="container" style="--THEME-COLOR: #0f0;"> 
    <!-- 该结构下的元素，重置为行内样式的主题色 -->
</view>

V. Резюме

  1. Пользовательские переменные CSS в настоящее время поддерживают все основные браузеры, а в младших версиях можно использовать совместимые решения;
  2. Между переменными SCSS и пользовательскими переменными CSS есть существенные различия. Они используются для решения проблем в разных сценариях. Пользовательские свойства CSS используются для динамических тем, а переменные препроцессора используются для статических шаблонов. Их можно использовать в комбинации в зависимости от ситуации. в проекте. ;
  3. Если вы используете пользовательские переменные в медиа-запросах, логика, связанная с адаптивным дизайном, отделена от обычного дизайна, но независимо от того, где мы видим оператор var(), мы можем четко знать, что это свойство изменится. Традиционным методом CSS мы не можем этого обнаружить, поэтому читабельность кода намного выше.

использованная литература

  1. Руководство по политике для пользовательских свойств CSS
  2. Глубокое погружение в пользовательские свойства CSS
  3. Советы: Понимание собственной переменной CSS/CSS3 var
Категории