CSS использует глобальное пространство имен для селекторов CSS, которое может легко привести к конфликтам стилей во всем приложении при создании приложения с использованием современных веб-компонентов. Вы можете избежать этой проблемы, вложив CSS-селекторы или используя соглашение по стилю, такое как BEM, но это быстро усложняется и не масштабируется.
CSS-in-JS полностью устраняет эти проблемы, генерируя уникальные имена классов при преобразовании стилей в CSS. Это позволяет вам думать о стилях на уровне компонентов, не беспокоясь о стилях, определенных в других местах.
В этом курсе вы узнаете, как выразить популярные функции языка SCSS (Sass) с использованием новейших функций JavaScript. Мы преобразуем простые примеры из SCSS в CSS-in-JS. Как дизайнер или (S) CSS-разработчик, вы должны быть в состоянии следовать без обширных знаний JavaScript, хотя понимание SCSS требуется. Мы не будем использовать какие-либо конкретные библиотеки CSSinJS. Вместо этого мы сосредоточимся на базовых знаниях, которые вам понадобятся позже, если вы используете какую-либо библиотеку CSSinJS.
Посмотреть больше
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
Convert SCSS (Sass) to CSS-in-JS,
а также все другие курсы, прямо сейчас!
Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables
Урок 2.00:02:06
Import JavaScript Variables for Styling with CSS-in-JS
Урок 3.00:02:17
Import and Render Style Partials from JavaScript Modules with CSS-in-JS
Урок 4.00:02:14
Use JavaScript Functions as Mixin Directives for CSS-in-JS Style Declarations
Урок 5.00:02:00
Destructure Named CSS-in-JS Arguments to use in JavaScript Mixin Functions
Урок 6.00:01:38
Define and Override Default CSS-in-JS Values for Arguments in a JavaScript Function Mixin
Урок 7.00:01:55
Apply Multiple CSS-in-JS Arguments in a JavaScript Mixin Function with the Rest Operator
Урок 8.00:03:15
Express CSS with JavaScript Objects for CSS-in-JS Notation
Урок 9.00:01:55
Use JavaScripts Spread Operator to Apply Style Objects Returned from CSS-in-JS Mixins
Урок 10.00:03:40
Prevent CSS Class Name Collisions with Scoped Class Names in CSS-in-JS
Урок 11.00:00:58
Style HTML with JavaScript Template Strings and Objects in CSS-in-JS
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
SASS - The Complete SASS Course (CSS Preprocessor)
Если вы хотите узнать о самом популярном расширении CSS и создавать современные, красивые и реалистичные веб-сайты, то этот курс для вас. Курс охватывает все, что вам нужно знать об этой удивительной технологии. На протяжении всего курса вы встретите подробные объяснения о том, как работает SASS, а также познакомитесь с современными практиками и решениями.