От автора: мы знаем, что наличие более чем одного источника истины может привести только к безумию. Но кое-что, с чем я столкнулся в нескольких интерфейсных базах кода — это повторение констант стиля (цвета, шрифты, размеры) в CSS и JS. Мы помещаем основной цвет в CSS в красивую переменную, но затем он нам понадобится в JS-коде (по какой бы веской причине это не было), поэтому мы продолжаем и создаем для него константу, потому что мы не собираемся жестко кодировать это значение, о нет! Но мы все равно нарушаем принцип DRY. Не повторяйся.
Итак, сегодня я собираюсь представить вам 2 метода: либо объявить эти переменные в CSS и использовать их из JS, либо наоборот.
JS => CSS
Итак, вы решили использовать JavaScript как источник истины. Ничего страшного, у вас есть на то свои причины. Например, вы, возможно, загружаете эти константы из пакета npm, они экспортируются как константы JS, и вам нужно вставить их в CSS.
Итак, во-первых, вам нужно иметь метод включения CSS из кода. Вот функция для этого:
function addStyle(styleString) { const style = document.createElement('style'); style.textContent = styleString; document.head.append(style);
}Эта функция получает параметр styleString, это будет CSS, который мы хотим включить. Первая строка функции создает элемент style, вторая устанавливает содержимое этого элемента в параметр styleString, а последняя добавляет этот элемент к разделу head нашего HTML. Вот и все.
Когда у вас есть эта функция, вы можете вызывать ее со стандартным объявлением переменной CSS.
addStyle(` :root { --color-primary: ${primaryColor}; }
`)Здорово! Итак, теперь вы можете получить доступ к этой переменной из CSS!
button { background: var(--color-primary);
}Вот и все! Легко, правда?
Однако у этого метода есть одна оговорка. Теперь CSS зависит от загружаемого и выполняемого JS. Почему это важно? Обычно CSS — это первое, что вы загружаете на страницу, а JS — последнее. Возможно, у вас уже есть эта проблема, если вы, например, используете CSS-in-JS, но хорошо помнить об этом.
Вот код с примером!
CSS => JS
Это удобный способ доступа к переменным CSS из кода JavaScript. Этот метод основан на следующем фрагменте кода:
function getCSSVariable(varName) { return getComputedStyle(document.documentElement) .getPropertyValue(varName);
}Эта функция принимает имена переменных в качестве параметра и выполняет следующие действия: во- первых, она вызывает window.getComputedStyle для document.documentElement (как правило, это <html>), это возвращает CSSStyleDeclaration, откуда можно вызвать getPropertyValue и получить переменные, которые нам нужны.
Вот код с примером этой техники:
А что насчет препроцессоров?
Оба эти метода основаны на функции переменных CSS, поэтому, если вы используете переменные SASS / LESS / Stylus, они не будут работать.
Однако вы можете объявить переменные CSS из переменных препроцессора, а затем получить их из JS, как в следующем примере, используя SASS:
$red: #ff0000;:root { --red: $red;
}Возможно, вы даже сможете написать классную функцию / миксин для генерации этого кода в стиле метапрограммирования. Супер круто, да. Надеюсь, вы найдете эти методы полезными!
Автор: Santiago Vilar
Источник: https://levelup.gitconnected.com
Редакция: Команда webformyself.