JavaScript для общения с CSS и Sass

JavaScript для общения с CSS и Sass

От автора: JavaScript и CSS живут вместе более 20 лет. И все же было невероятно сложно обмениваться между ними данными. Конечно, были хорошие попытки. Но я имею в виду что-то простое и интуитивно понятное — что-то, что не связано со структурными изменениями, а скорее включает использование пользовательских свойств CSS и даже переменных Sass.

Пользовательские свойства CSS и JavaScript

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

В частности, мы можем использовать JavaScript с пользовательскими свойствами несколькими способами. Мы можем установить значение пользовательского свойства, используя setProperty:

Мы также можем получить переменные CSS, используя в JavaScript getComputedStyle. Логика довольно проста: пользовательские свойства являются частью стиля, поэтому они являются частью вычисляемого стиля.

Что-то наподобие работы с getPropertyValue. Это позволило нам получить значение пользовательского свойства из встроенного стиля HTML разметки.

Обратите внимание, что пользовательские свойства ограничены. Это означает, что нам нужно получить вычисляемые стили из определенного элемента. Так как мы ранее определили переменную для :root, мы получаем их для элемента HTML.

Переменные Sass и JavaScript

Sass — это язык предварительной обработки, то есть он превращается в CSS еще до того, как становится частью веб-сайта. По этой причине доступ к ним из JavaScript так же, как и к пользовательским свойствам CSS, которые доступны в DOM в виде вычисляемых стилей, невозможен.

Нам нужно изменить процесс сборки, чтобы сделать это. Я думаю, что в большинстве случаев в этом нет особой необходимости, поскольку загрузчики часто уже являются частью процесса сборки. Но если это не так в вашем проекте, нам нужны три модуля, которые способны импортировать и переводить модули Sass.

Вот как это выглядит в конфигурации webpack:

Чтобы сделать переменные Sass (или, в частности, в данном случае SCSS) доступными для JavaScript, нам нужно их «экспортировать».

Блок :export – это магия WebPack, которая используется, чтобы импортировать переменные. Что хорошо в данном подходе, так как мы можем переименовать переменные, используя синтаксис camelCase, и выбрать то, что мы извлекаем.

Затем мы импортируем файл Sass (variables.scss) в JavaScript, предоставляя доступ к переменным, определенным в файле.

Есть некоторые ограничения для синтаксиса :export, о которых стоит упомянуть:

Он должен быть на верхнем уровне, но может находиться в любом месте файла.

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

Если конкретный exportedKey дублируется, последний (по порядку в источнике) имеет приоритет.

exportedValue может содержать любой символ, который действителен в объявлении значений CSS (включая пробелы).

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

Есть много способов получить доступ к переменным Sass в JavaScript, которые могут вам пригодиться. Я склонен использовать этот подход для разделения контрольных точек. Вот мой файл breakpoints.scs, который я позже импортирую в JavaScript, чтобы иметь возможность использовать метод matchMedia() для создания согласованных контрольных точек.

Анимация является еще одним вариантом использования. Длительность анимации обычно хранится в CSS, но более сложные анимации необходимо выполнять с помощью JavaScript.

Обратите внимание, что я использую при экспорте переменной пользовательскую функцию strip-unit. Это позволяет мне легко парсировать вещи на стороне JavaScript.

Я рад, что могу легко обмениваться данными между CSS, Sass и JavaScript. Совместное использование таких переменных делает код простым и чистым.

Конечно, есть несколько способов достичь одного и того же. В 2017 году Лес Джеймс поделился интересным подходом, который позволяет Sass и JavaScript взаимодействовать через JSON. Я могу быть предвзятым, но думаю, что подход, который мы рассмотрели здесь, является самым простым и наиболее интуитивным. Это не требует сумасшедших изменений в том, как вы уже используете и пишете CSS и JavaScript.

Автор: Marko Ilic

Источник: //css-tricks.com

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: