Как да използвате компоненти Sass и Styled в React JS приложение

Днес ще обхващаме няколко популярни метода за стилизиране на нашите приложения на React JS, като Styled Components и Sass, за да обясним предимствата и на двете.

В общността за онлайн развитие съществува битка за това дали хората трябва да използват CSS-in-JS или CSS-in-Javascript. Тази публикация не е съгласна или несъгласна с някоя от тези гледни точки, а по-скоро да се въведе, за да можете да решите сами.

Двата инструмента, които ще покрием днес са Styled Components, което е CSS-in-JS библиотека, която улеснява реализацията в проект React js. Другият инструмент се нарича Sass, който е популярен инструмент през последните няколко години в света на JavaScript.

За всеки пример ще създаваме компонент на социална карта с изображение, потребителско име, времена марка, потребителска снимка и състояние. Трябва също да се отбележи, че те не са специфични за Реакцията. Можете да ги използвате във Vuejs, Angular или всичко друго, което изграждате в JavaScript.

Защо хората спорят за CSS-in-JS?

Основната причина за разискването е свързана с разделянето на проблемите. По-добре ли е да пишем стиловете си точно в нашия компонент? Трябва ли да държим стиловете си отделни от нашия JavaScript?

Не знам, че непременно има "правилен" отговор. Сигурен съм, че има случаи на използване, при които всеки е по-подходящ, въпреки че намирам по-често за Сас. Нека да влезем във всеки по малко повече, за да можете да решите кои предпочитате!

CSS-в-JS

Концепцията на CSS-in-JS започна да създава вълни, когато беше обсъдена през 2014 г. Оттогава са създадени много различни библиотеки, които да се опитват да превърнат тази концепция в реалност. Някои от тези библиотеки са: Стилизирани компоненти, Радий, Афродита или Емоция.

В тази публикация ще използвам стилизирани компоненти, въпреки че предлагам да проверите всеки от тях, тъй като всеки има синтаксис и работи малко по-различно. Документацията за всеки от тях е доста добра, за да научите основите и да видите кои са най-удобните.

Инсталиране на стилни компоненти

Ако приемем, че вече имаме създаден проект React js, можем да добавим Styled Components към проекта, като пуснем npm инсталиране на styled-компоненти или прежда добавете styled-компоненти в терминала. Това ще добави зависимостите към проекта и ще ни подготви да стилизираме нашето приложение.

Създаване на карта със стилизирани компоненти

Следващата стъпка ще бъде да създадем компонент, който да показва нашата карта. Можем да използваме кода по-долу, за да направим това:

Нека поговорим за кода по-горе. Вероятно ще видите някои неща, които изглеждат познати, ако ви е удобно с CSS и ще видите някои неща, които изглеждат малко странни. Стилизираните компоненти ни позволяват да пишем стилове, точно както бихме направили във CSS файл, въпреки че някои други CSS-в-JS библиотеки ще изискват от нас да използваме Camel Casing, защото всъщност просто създава JavaScript обект.

Това, което прави по-горе кодът, е създаването на const променлива, наречена Card, която казва, че стилизиран трябва да създаде div със следните свойства. Това може да се направи за всеки DOM елемент, така че ако искате да стилизирате h1 маркер, ще използвате styled.h1.

Добавяне на медийни заявки и влагане

Вътре в променливата на картата можем също да пускаме медийни заявки, за да направим нещата по-отзивчиви. Ако добавим медийна заявка като кода по-долу, можете да видите, че когато достигнем максимална ширина от 1000px, фона на картата става червен. Това всъщност не е стил, който искаме да добавим, а просто за демонстрационни цели.

Също така можем да вложим стиловете си във вътрешността на стилизирания компонент, което опростява кода, който пишем. Ако сте използвали sass или по-малко, вече сте запознати с тази концепция. Примерът по-долу показва как можем да направим това за обработка на стилове за изображението в компонента на нашата карта:

Използване на Javascript в стилове

Друго предимство на използването на CSS-in-JS е, че можем да смесваме javascript със стилове. Осъзнавам, че това звучи доста очевидно от името на концепцията, но това, което искам да кажа е, че можем да използваме логиката за показване на нещата и можем да предаваме променливи в стиловете си. Това може да се превърне в много мощен инструмент с библиотека като React js. Няма да запазим този стил, тъй като е малко отвратително, но за целите на илюстрацията можем да направим това с низови букви така:

Използването на CSS-in-JS ни позволява да поддържаме локални стилове, вместо всичко да е глобално или да се налага да добавяме тон класове към всичко, за да работи. Това означава, че нещата могат да бъдат по-кратки и не е нужно да се притесняваме за един стил, който да отмени друг. В допълнение, това означава, че винаги знаем къде да търсим, ако трябва да променим стила. Не е нужно да се вкореняваме в куп CSS файлове, които търсят клас.

За да направим това, трябва да импортираме компонента ThemeProvider от стил-компоненти и да предоставим променлива за тема. Темата променлива ще съдържа всички глобални променливи, които бихме искали да използваме с нашите стилове. Например, ако имате основен цвят, който използвате за навигационния панел, бутоните и връзките, няма смисъл да твърд код, който всеки път, когато искате да го използвате.

Използване на глобална тема

Ами ако трябва да го актуализирате някой ден? Това звучи като много търсене и заместване на чакането да се случи. Вместо това можем да декларираме глобалната променлива на темата и да получим достъп до нея от всеки от стилизираните ни компоненти. Това е доста просто и е илюстрирано по-долу.

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

За да демонстрираме това, нека добавим някои глобални стилове и малко съдържание за нашата социална карта. Кодът по-долу добавя необходимото съдържание към социалната карта и също така добавя няколко глобални стила, които да бъдат приложени към текста.

Това очевидно е доста основен пример, но това е прост начин да намокрим краката си със стилизирани компоненти. Има и някои по-задълбочени неща, с които можем да се справим, за които можем да научим в документацията.

Стилизираните компоненти са много приятни, защото ни позволяват да хвърляме стиловете си в същия файл като нашия компонент, а не да отваряме няколко различни файла, за да намерим правилните стилове. Ето как изглежда нашата завършена социална карта със Styled Components:

Използване на Sass в React Application

Sass е създаден преди няколко години и първоначално е реализиран в приложения, създадени с помощта на Ruby. През последните години той е пригоден да работи с Node.js, което ще го използваме днес. Може да забележите, че създаваме „scss“ файлове, но го наричаме sass. Това е така, защото първоначално Sass е създаден с определен синтаксис, който всъщност е известен като „Sass“. По-късно беше създаден алтернативен синтаксис, който да наподобява по-скоро CSS и това се нарича „Scss“. Тъй като Scss има същата функционалност на Sass, тя все още попада в категорията на Sass.

По принцип е доста лесно да станете и да стартирате със Sass в приложението React js, въпреки че наистина има значение как вървите към пакетирането или компилирането на приложението си. В кода за този урок ще използвам Parcel js, който е доста лесен за ставане и работа и обработва Sass за нас. Има и други библиотеки, които понякога са необходими като node-sass, gatsby-plugin-sass или next-sass.

Настройване на нашите Sass файлове

Има няколко различни начина за използване на Sass в приложението React js. Първото би било да създадете компонент в папка и да включите стиловете за компонента като .scss файл в тази папка и да ги импортирате директно в компонента. Направих го по този начин и открих, че е лесно, но не се интересувах толкова много от организацията.

Алтернатива е да създадем папка Sass в рамките на нашия проект и тук ще живеят нашите стилове. Това е организационният метод, който ще използваме днес. След това ще създадем папка в проекта, наречена „Sass“ и ще добавим файл, наречен „app.scss“. Въпреки че бихме могли да поставим всички наши стилове в този файл на app.scss, това ще се обърка и няма да има голяма полза от нормалния CSS.

Вместо това ще създадем отделни файлове и просто ще ги импортираме във файла app.scss. След това можем да импортираме файла app.scss в нашия app.js файл и Parcel ще направи останалото.

Структура на Sass Folder

Има много различни мнения как да организираме папката с нашите стилове. Бихме могли да прекараме TON време, като се спускаме със заешка дупка на организационни техники, но намирам, че начинът, по който обичам да го правя, е да организирам папката си Sass по същия начин като моя проект. Обикновено това се изразява в следното оформление:

  • / Sass
  • / Sass / Components - Директория, която има .scss файл за всеки компонент React
  • / Sass / Pages - Директория, която има .scss файл за всяка страница, която изисква персонализирани стилове
  • / Sass / Шаблони (незадължително) - Директория за шаблони, ако ги използвате (за инструменти като gatsby)
  • /Sass/_elements.scss - всякакви общи стилове за сайта. Не трябва да има класове или идентификатори за селектори.
  • /Sass/_keyframes.scss (незадължително) - всякакви ключови рамки или анимации, които ще използвам за сайта.
  • /Sass/_mixins.scss - Всички комбинации (фрагменти от стил), които ще се използват отново и отново
  • /Sass/_variables.scss - Всички променливи, които ще се използват в стилове
  • /Sass/app.scss - Файлът, който импортира всички останали scss файлове

Първото нещо, което може да забележите за имената на файловете е, че няколко от тях започват с подчертаване. Това е така, защото извън възел Sass всъщност се компилира във CSS файл. Всеки SCSS файл без подчертаване в началото е съставен като различен стилов лист. Тъй като ние дърпаме всички наши таблици стилове във файла app.scss, вместо да ги разделяме, всички те трябва да започват с подчертаване.

Тъй като нашето приложение е само една карта за социални медии, няма да имаме нужда от всички тези. За простота, докато обясняваме това, ще използваме файловете app.scss, _variables.scss и _elements.scss, както и директорията с компоненти.

Като се казва, нека започнем!

Настройка на променливи в Sass

Тъй като имаме някои променливи в стиловете си на Styled Components, можем да продължим и да ги настроим и тук. За целта създайте файл, наречен _variables.scss във файла Sass за нашите стилове. Вътре в файла _variables.scss добавете следния код.

След като добавим някои променливи, трябва да ги импортираме във файла app.scss. Тъй като ние искаме да използваме тези променливи навсякъде в нашите стилове, това импортиране трябва да е в горната част на списъка за импортиране. Следващият ред код ще добави променливите към нашите стилове. Също така можем да видим, че не трябва да включваме подчертаването или разширението на файла в декларацията за импортиране, защото Sass е достатъчно умен, за да знае, че това имаме предвид.

Създаване на глобални стилове за елементи

Създадохме някои глобални стилове за нашето приложение за стилни компоненти, които зададоха нашия шрифт на sans-serif шрифт и зададохме цвета на нашия текст на # 333. Нека продължим и да създадем тези стилове и в Sass. За начало ще създадем файл _elements.scss в нашата папка Sass. По-долу са стиловете, които използвам за този файл и ще забележите, че използвам променливите, които създадохме точно както направихме със стилизираните компоненти.

Сега можем да импортираме файла _elements.scss в нашия app.scss файл. Вижте дали можете да го направите, без да търсите. Нашият app.scss файл сега трябва да изглежда така:

Добавяне на класове към елементи в компонент

За да можем да се насочим към елементите в нашия компонент React js, трябва да добавим някои класове и / или идентификатори. CSS рамки като Boostrap и Foundation изискват много класове, които могат да станат доста разхвърлени. Любимият ми код е кодът, който няма 30+ класа на елемент за стилове, така че, имайки това предвид, нека да продължим напред и да добавим някои класове към нашия компонент с кода по-долу:

Страхотно! Нека започнем да оформяме нашия компонент! Вътре в папката Sass създайте нова папка, наречена „компоненти“. Тази папка ще съдържа стиловете за всички наши React js компоненти. Обикновено бих сложил всеки компонент в собствен файл, това е доста просто приложение, така че ще го запазим във файла app.js.

Ние можем да настроим стилове по същия начин като нашите стилизирани компоненти, тъй като Sass също може да се справя с влагане и медийни заявки. Тъй като изказването ни за импортиране ще се появи след импортирането на променливи в app.scss, можем да използваме всичко, което е било импортирано преди този файл. Това е полезно с миксини, които са кодови фрагменти, които можете да използвате повторно. Можете дори да създадете някаква функция, в която предавате аргумент и да го използвате в целия код на mixin.

Кодът по-долу ще стилизира социалната карта да изглежда същата като нашата стилистична социална карта:

Сега можем да продължим и да напишем декларацията за импортиране във файла app.scss, така че ние се дърпаме в стиловете за картата.

И точно така, ето последният компонент на социалната карта с нашите стилове sass. Изглежда като компонента в Styled Components.

Последни мисли за Sass срещу Styled Components

Както можете да видите, и Sass и Styled Components са ценни начини за презареждане на стилове в приложения React js. В крайна сметка смятам, че трябва да използвате този, който ви харесва да използвате най-много. Смятам, че по-често посягам към Sass, но също така ми е приятно да използвам CSS-in-JS в някои от личните си проекти. Ако искате кода, посочен в тази публикация, да разгледате или да си поиграете, можете да го намерите тук.

Първоначално публикуван на www.iamtimsmith.com.