Transcript for:
Налаштування стилів CSS та SCSS в компонентах

Та нормально так дивився на свої стилі я не розібрався в них Дивись там в тебе все добре Вони підключаються там в тебе справи саме в CSS зараз можешнути демонстрацію і дивись також компоненту краще ти там назвав краще її просто назвати на зликою угу а самі статі Ще не робив ні ні я ще нічого не робив бо в мене вилетіли ее такй видно А так Угу вона тут мене в мене без стиль CSS зараз подивись на scss CSS ist так [музика] ст ст подивись саме Відкрий на модуль scss Угу Подивись в тебе є justif aline але вони тебе не працюють як ти вжаєш чому ага ага чого тут не [музика] вистачає Угу теж ми казали що item Just content R gap col G Вони працюють лише Ну в принципі трошки змістилось Давай ще одне подивимось у нас є ширина в тебе вказана від 500 з чимось із-за цього воно ще так в тебе стало А можеш як варіант взагалі відце всю прибрати і подивитись Ага ста рівно і поставити colum gap вже потім пантоп поставити угу F там тепер ставиш наприклад той же самий colм gap так в тебе щось з інтернетом я тут качути так зараз чутно о мене деколи поганий інтернет був кращий угу ай нас List itйem Tu ini чи та Тепер звертаєшся давай тому і тільки ти не забув підключити шрифтибу заразйого поки що паб вндекс HTML підключаєш посиланям Угу тут натискаєш getфн угу і getе ні ні не скачуємо getе Угу імпортом Чи лінком А можеш лінком можеш імпортом і їх підключаєш в наш індекс HTML ні в індекс HTML він в нас паблі і індекс hml він в нас один Ага бачу пому де а взяти ось в нас фон Family дивись угу [музика] О зразу її пате появляється угу так А я щось забув як поставити стилі дивись це ми Заходимо в item Now тут можеш дивитись як варіант подивитись як ми робили пам'ятаєш скидо в архівом подивись детально там зараз це в нас буде ми пересваємо атрибут ось подивись уважно як у нас ось тут зроблено дивись у нас є ев У нас є на Store угу а потім подивись самому на аймі як воно зроблено відкри са компонент [музика] на Так це мі що в тебе справа Угу чорнию і подивись най На диви де обов'язково list it а далі перевіряється проs якщо якщо він в нас ти впав з простекстом тоді ми додаємо класно в принципі тільки не копіюй а спробуй власноручти пока тут не понял миж задаєм it зайди тамбе ось в нас поки що є в тебе один клас подивись тут у нас два класи S List item а далі вира якщо в нас проs AC співпало з Прос текстом то тоді воно дає ось цей list itemв ага а себе подивлюсь дивишся як ми тоді писали на уроці і також робиш такваго сварить а там 430 не сист чогоно світиться а Подивись там д о тебе Ага [музика] it Упс текст передаюю текст то ага ага я та понял таки мені треба перенести за други H получається і тут же йде в нас текст ки поня так класж тати ось цей клас винести вниз щоб було зручнішим [музика] я щось не розумію що тут не так Давай подивимось пролоснемо трішки в праву частину там дивись на перед амперсантами потрібен відступ угу так спробую те подивитись на помилку [музика] напише спробую подивитись тут начебто все добре застосовується Дава інпекто зараз секунду так поки що не звертає увагу Давай подивимось саме в елементах відкривай елементи в інспекторімен А зараз ще раз можеш відкрити весь код дивись тут в тебе неправильнокі [музика] у нас Ніні з малою Подивись там як у нас називається ось бачи він у нас називається параметри Який пропередається в тебе не вистачає там букви Т на ось девята скрчка бачишгу тут поде щось че Все давай подивимось знову ж таки в браузері давай зараз в інспекторі подивимось тепер ось бачино вже підставило Ага побачу мабуть в тебе трішки трансляція тормозить може бути так пробую тепер статті робити також нас Пам'ятаєш ми робимо як такий er articles і робимо articles it статті та одна наша стаття тут категорії tle ік одна у нас картинка поки що зараз сеelection категорія А тобто Воно якби атрибути стави та а так дивись ми у нас articles item це одна стаття ми пропередаємо те що в нас потрібно підставити і підставляємо угу так нас пініше як не працює щоб папки роз'єднювались там Дивись натискаєш на компо правою кнопкою миші Угу і newфлдер Ага так так тут наприклад називашticles там взагалі є розширення але назву зараз тобі тобі на жаль не підскажу угу о нарешті повернулося пона ма бу mhm Eh так тепер тут Угу я так угу шміти [музика] Так коларипст у нас вди однакове section угу h h Man кл айм непонятнака см усьворить що про закрити M [музика] а не світить що що світить щось цю душку дивись айтем воно світить тому що ніде не використовано поки що не айтем цю душку червону черво скоріш за все воно зайво якщо я зараз заберу наприклад цепер синя А дивись тому що там в тебе немає нічого повернення Там повинна бути якась наприклад як у нас справа ми тоді писали не я би ще її просто до неї не дойшов так зараз давай зробимо невеличку перерву і овось продовжимо добре добре угу okay está так Ну що готов продовжити так микай тоді демонстрацію угу А вона виробилась ага пере заходи вино а так видию так це зараз вись цікаво Ага як лі а знову зараз не поняв Ага поняв тепер цеє після хедеру получається і ал ту не імпортнуло сма стрічка воно кажеть Що Дивись вона каже Ліст тебекра не хватає а А я бачу що вона не використана чи і дивись там в тебе сне sкра list item Im тут S крап і прибираєш Там просто ідж угу використа імпортф тут же ж лежить Тут тепер зберігаєш дивишся що воно в тебе не так тут крапки не хватає там подивись тебе ідж png з малою Угу спн то тут зробити пробувати мало тут може так мало І тут так зберігаєш спиріг Я ще не дуже поняв коли треба поставити крапку Коли просто слеш [музика] мущо А я поня так вибачаю щось з інтернетом а тоже проблем бувати А казав що не дуже розумі деколи не дуже розумію коли треба ставити крапку завжди ставити Ага так Давай подивимось в нас ар item тут в тебе ідж є а відкрию імедж інчи Угу картинка в нас є ага дивись воно в нас а відкрию зараз ар так і вверх на самий верх да подивимось по імпортам articles itє так дуже дивно откри6 [музика] спробуй дивись в терміналі ctrlсгу і ще раз так ігно дивись там в тебе воно ще а воно в тебе Помилка була в модулі бачи на ticles Mod CSS подивимось на статтях Ага зараз зайди articles і крапку СШ не взяло значитьже Наді а можливо щось не так в назві да подивимось Ага Дивись там в тебе модуліс неправильно названий го тут бачи тебе арк T а там в тебе arles А може воно ще сриться тож так само тільки крапку СШ стави О ну ладнотинки скачувати кожну окремо Ні тут одну картинку робим поки що угу таксти як сеtionш [музика] ні там Пам'ятаєш на або флексрепом розділяємо dirtion ой ч Там можеш подивитись постелям як ми тоді робили Ліст Ага ми Ліст продавали де в нас лістtion росі простопити Ліст юлці в цілі секція юлціст [музика] ціє000 воно не бере треба там Уважно дивись по стилям нас ще потрібно буде кожнону айтем зробити по 50% наприклад або також ВМ задати щоб воно зрозуміло кож айтем та кожен Ліст получаться кожен На аймлісті HM Рав ви шукає що не є стати Тині де H знов стало ж не так ам 420 пікселів А на 50% воно коря воно стоїть що тут Цет подивись по інспектору стилі section Ага тобто секш має я поняв пе секш без того Бе звідси поставитипробувати [музика] розділило тепер а дивисьди зараз ми будемо вже закінчуватигу а спробую вдому по оцьому прикладу робити ось ці статті добре добре ІЖ спробувати ще якийсь дизайн взяти і тикуватистворювати компоненти подивлюся Угу Все тоді Гарного вечора тобі бітеш пока давай