Сасс (синтаксички сјајни листови стилова) је проширење ЦСС-а са додатним функцијама које га чине моћнијим. Најбоља ствар код Сасс-а је његова компатибилност са ЦСС-ом, што значи да га можете користити у својим пројектима веб развоја са ЈаваСцрипт оквирима као што је Реацт.
Међутим, за разлику од ванилла ЦСС-а, потребно вам је мало подешавања да бисте користили Сасс. Сазнајте како ово функционише тако што ћете поставити једноставан Реацт.јс пројекат и интегрисати Сасс са њим.
Како користити Сасс у свом Реацт.јс пројекту
Као и други ЦСС процесори, Сасс није изворно подржан од стране Реацт-а. Да бисте користили Сасс у Реацт-у, морате да инсталирате зависност треће стране преко менаџера пакета као што је иарн или нпм.
Можете да проверите да ли је нпм или иарн инсталиран на вашој локалној машини тако што ћете покренути нпм --версион или предиво --верзија. Ако не видите број верзије у свом терминалу, инсталирај нпм или прво предиво.
Направите Реацт.јс пројекат
Да бисте пратили овај водич, можете да подесите једноставну Реацт.јс апликацију користећи цреате-реацт-апп.
Прво користите командну линију да бисте се кретали до фасцикле у којој желите да креирате свој Реацт пројекат. Онда трчи нпк цреате-реацт-апп . Када се процес заврши, унесите директоријум апликације користећи цд . Додајте следећи садржај у свој Апп.јс фајл као стартер:
увоз Реаговати из "реаговати";
увоз "./Апп.сцсс";
функцијаАпликација() {
повратак (
<див цлассНаме="омотач">
<х1>Коришћење Сасс-а у Реацт-у</h1>
<заглавље Име класе="враппер__бтнс">
<дугме>Плаво дугме</button>
<дугме>Црвено дугме</button>
<дугме>Зелено дугме</button>
</header>
</div> );
}
извозУобичајено Апликација;Када поставите основни Реацт пројекат, време је да интегришете Сасс.
Инсталирајте Сасс
Можете инсталирати Сасс преко нпм-а или иарн-а. Инсталирајте га преко пређе тако што ћете покренути пређе додати сасс или, ако више волите нпм, покрените нпм инсталл сасс. Ваш менаџер пакета ће додати најновију верзију Сасс-а на листу зависности у пројекту пацкаге.јсон фајл.
Преименујте .цсс датотеке у .сцсс или .сасс
У фасцикли пројекта преименујте Апп.цсс и индек.цсс у Апп.сцсс и индек.сцсс, респективно.
Након што сте преименовали те датотеке, потребно је да ажурирате увозе у вашим датотекама Апп.јс и индек.јс да би одговарали новим екстензијама датотека на следећи начин:
увоз "./индек.сцсс";
увоз "./Апп.сцсс";Од овог тренутка па надаље, требало би да користите екстензију .сцсс за било коју датотеку стила коју креирате.
Увоз и коришћење променљивих и мешавина
Један од најзначајнијих предности Сасс-а је то што вам помаже да пишете чисте стилове за вишекратну употребу користећи променљиве и миксине. Иако можда није јасно како то можете да урадите у Реацт-у, то се не разликује толико од коришћења Сасс-а у пројектима написаним помоћу обичног ЈаваСцрипт-а и ХТМЛ-а.
Прво, креирајте нову Стилови фолдер у вашем срц фолдер. У фасцикли Стилови направите две датотеке: _вариаблес.сцсс и _микинс.сцсс. Додајте следећа правила у _вариаблес.сцсс:
$бацкгроунд-цолор: #ф06292;
$тект-цолор: #ф1д3б3;
$бтн-видтх: 120пк;
$бтн-висина: 40пк;
$блоцк-паддинг: 60пк;И додајте следеће у _микинс.сцсс:
@микин вертикална листа {
дисплеј: флек;
алигн-итемс: центар;
флек-дирецтион: колона;
}Затим увезите променљиве и миксине у Апп.сцсс на следећи начин:
@увоз "./Стилови/варијабле";
@увоз "./Стилес/микинс";Користите своје променљиве и миксеве у датотеци Апп.сцсс:
@увоз "./Стилес/вариаблес.сцсс";
@увоз "./Стилес/микинс";
.враппер {
бацкгроунд-цолор: $бацкгроунд-цолор;
боја: $тект-цолор;
паддинг: $блоцк-паддинг;&__бтнс {
@укључити вертикала-листа;
дугме {
ширина: $бтн-видтх;
висина: $бтн-висина;
}
}
}
Тако користите променљиве и миксине у Реацт-у. Поред микса и променљивих, можете користити и све друге сјајне функције у Сасс-у, попут функција. Нема ограничења.
Коришћење Сасс-а у Реацт.јс
Сасс пружа више функционалности поврх ЦСС-а, што је управо оно што ће вам требати за писање ЦСС кода за вишекратну употребу.
Можете почети да користите Сасс у Реацт-у тако што ћете инсталирати сасс пакет преко нпм-а или иарн-а, ажурирати своје ЦСС датотеке на .сцсс или .сасс, а затим ажурирати своје увозе да бисте користили нову екстензију датотеке. Након тога можете почети да пишете СЦСС у Реацт-у.