egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Продолжительность
0 ч 23 мин
Категория
CSSКоличество уроков
11 Видео
Дата добавления
14 нояб. 2019 г., 21:46
Язык
Английский
Дата обновления
29 апр. 2026 г., 05:26
CSS-in-JS становится ключевым инструментом для современных интерфейсов, а понимание того, как переводить привычные конструкции SCSS (Sass) в этот формат, помогает разработчикам создавать масштабируемые и устойчивые стили. В этом материале мы разберём, как выполнить такую конвертацию грамотно и эффективно.
Что такое SCSS и зачем его переводить в CSS-in-JS
SCSS предоставляет удобные возможности: вложенность, переменные, миксины и функции, которые значительно упрощают работу со стилями. Однако глобальность пространства имён CSS может приводить к пересечению и конфликтам стилей.
CSS-in-JS решает эти проблемы за счёт автоматической генерации уникальных стилей при сборке, позволяя полностью мыслить категориями компонентов.
Преимущества перехода от SCSS к CSS-in-JS
- Уникальные, изолированные классы без риска конфликтов.
- Удобная работа со стилями на уровне компонента.
- Динамические стили, основанные на данных и состоянии.
- Отсутствие необходимости в глобальных соглашениях (например, BEM).
Какие возможности SCSS мы будем конвертировать
Курс охватывает ключевые возможности SCSS и их аналоги в CSS-in-JS, чтобы вы могли уверенно использовать их в реальных проектах.
Вложенность селекторов
Вы узнаете, как преобразовать вложенные структуры SCSS в объектный формат CSS-in-JS, сохраняя понятность и логику кода.
Переменные
Разберём, как заменять SCSS-переменные на JavaScript-переменные, включая создание тем и управление палитрами.
Миксины и функции
Покажем, как выражать миксины через функции JavaScript и переиспользовать их в разных компонентах.
Как построено обучение
Материал подаётся через простые и понятные примеры: каждый SCSS-фрагмент будет преобразован в эквивалентный CSS-in-JS. Вы сможете повторить все шаги без глубоких знаний JavaScript — достаточно базового опыта работы со SCSS.
Почему мы не используем конкретную библиотеку CSS-in-JS
Курс сосредоточен на фундаментальных принципах. Освоив базу, вы легко перейдёте на любую библиотеку — styled-components, Emotion, JSS или любую другую.
Кому подходит этот курс
- SCSS/Sass-разработчикам, переходящим к компонентному стилю.
- Дизайнерам, работающим с веб-интерфейсами.
- Фронтенд-разработчикам, внедряющим архитектуру CSS-in-JS.
- Тем, кто хочет избавиться от проблем глобальных стилей и масштабировать проекты.
Что вы получите после прохождения
- Понимание принципов CSS-in-JS и их связи с SCSS.
- Навык написания изолированных стилей без конфликтов.
- Умение переводить SCSS-проекты на новый формат.
- Знание современных возможностей JavaScript для работы со стилями.
Освойте современный подход к стилизации интерфейсов и научитесь уверенно переводить привычный SCSS в гибкий и мощный CSS-in-JS.
- Урок 1.00:02:01Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables
- Урок 2.00:02:06Import JavaScript Variables for Styling with CSS-in-JS
- Урок 3.00:02:17Import and Render Style Partials from JavaScript Modules with CSS-in-JS
- Урок 4.00:02:14Use JavaScript Functions as Mixin Directives for CSS-in-JS Style Declarations
- Урок 5.00:02:00Destructure Named CSS-in-JS Arguments to use in JavaScript Mixin Functions
- Урок 6.00:01:38Define and Override Default CSS-in-JS Values for Arguments in a JavaScript Function Mixin
- Урок 7.00:01:55Apply Multiple CSS-in-JS Arguments in a JavaScript Mixin Function with the Rest Operator
- Урок 8.00:03:15Express CSS with JavaScript Objects for CSS-in-JS Notation
- Урок 9.00:01:55Use JavaScripts Spread Operator to Apply Style Objects Returned from CSS-in-JS Mixins
- Урок 10.00:03:40Prevent CSS Class Name Collisions with Scoped Class Names in CSS-in-JS
- Урок 11.00:00:58Style HTML with JavaScript Template Strings and Objects in CSS-in-JS
Автор - egghead
Комментарии