Ускоряем верстку | Гайд по препроцессору стилей

Ускоряем верстку | Гайд по препроцессору стилей | Sass (SCSS)

Рет қаралды 15,042

Александр Ламков — Friendly Frontend

Күн бұрын

✏️ Узнаем что такое препроцессор стилей, для чего он нужен,
как его настроить в IDE VSCode и WebStorm, разбираемся в основных функциях препроцессора Sass.
🔴 Timeline:
▶ 00:00 | Введение
▶ 00:33 | Проблемы CSS
▶ 03:24 | Что такое препроцессор стилей
▶ 04:27 | Настройка препроцессора Sass в VSCode
▶ 08:14 | Настройка автокомпиляции SCSS в CSS через Prepros
▶ 10:43 | Настройка препроцессора Sass в WebStorm
▶ 12:29 | Препроцессор Sass (SCSS)
▶ 13:45 | Препроцессор Sass - вложенность селекторов
▶ 16:18 | Препроцессор Sass - миксины
▶ 18:20 | Препроцессор Sass - переменные в миксинах
▶ 20:41 | Препроцессор Sass - функции
▶ 21:56 | Препроцессор Sass - циклы
▶ 23:12 | Препроцессор Sass - разбивка на файлы, включение файлов друг в друга
▶ 26:41 | Заключение
📚 Ссылки:
➖ NodeJS: nodejs.org/
➖ Prepros: prepros.io/
➖ Sass: sass-lang.com/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #html #css

Пікірлер: 129

@AleksanderLamkov 5 ай бұрын

Для VSCode оказывается есть расширение Live Sass Compiler: marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass Можно через него работать с SCSS также удобно, как в WebStorm.

@sartjhon3300 5 ай бұрын

только хотел написать об этом. зачем этот велосипед с json.task )

@OlegNaumov-me6yj 3 ай бұрын

Странно что вы раньше этого не знали.

@AleksanderLamkov 3 ай бұрын

Потому что с VSCode не работал уже года три. Забыл уже что такое «плагин для IDE», в вебшторм всё есть «изкоробки».

@user-ph3sz6fd3z 2 ай бұрын

@@OlegNaumov-me6yj Здесь ничего удивительного нет! Знаешь ту программу, в которой постоянно работаешь, а работаешь в той проге, которую знаешь. Как-то так.

@alexb.2616 5 ай бұрын

Блин, я даже не знаю, что сказать... Саша, это лучший подрок на новый год! Именно то, что нужно прямо сейчас!!! Фронтенд Дед Мороз не носит бороды. И подарки он доставляет не со снегурочкой, с котом из VK. Спасибо тебе большое!

@aswarriorr 2 ай бұрын

Если можно было бы ставить лайк при каждом разом включая это видео ,я бы это делал не задумываясь ! Респект тебе !

@MsDlovar 5 ай бұрын

Спасибо за полезное видео. Хотелось бы мастер класс по верстке с использованием всех этих преимуществ.

@AleksanderLamkov 5 ай бұрын

Обязательно будет! В середине января примерно.

@dondiablopablo 4 ай бұрын

Отличное видео, всё по полочкам, всё понятно, вот прям то, что нужно, супер формат! До этого смотрел другие видео на подобную тему и есть чем сравнить.

@user-fz1cm2ml1v 5 ай бұрын

Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?

@Ivanfwit 3 ай бұрын

отличное видео, спасибо! ждем продолжение про scss и другие препроцессоры)

@solula1744 4 ай бұрын

Очень круто, все понятно! Большое спасибо)

@exacreator 3 ай бұрын

Максимально полезное видео, спасибо большое ❤

@VL4STEL1N 4 ай бұрын

Отличные гайды у тебя! Респект )

@user-ji6vi7hp2z 5 ай бұрын

Как всегда отличный урок! Раскройте, пожалуйста, тему правила @use, особенно в контексте подключения медиа-запросов. Спасибо.

@AleksanderLamkov 5 ай бұрын

Привет! Постараюсь в мастер-классе использовать @use для медиазапросов.

@_SOMEONE_ 4 ай бұрын

Спасибо огромное!

@user-rc6ye4jn3q 2 ай бұрын

Спасибо Огромное! Очень помог. Как раз Live Sass Compiler перестал работать. Полдня искал альтернативу :)

@ELDAR011288 Ай бұрын

Классный гайд!

@biscvie 2 ай бұрын

Спасибо!

@un_defined 17 күн бұрын

спасибо

@MrJettann 5 ай бұрын

Привет, видео получилось интересным! Хотел спросить, есть ли какой способ, чтобы в миксинах использовать css переменные, но которые идут с единицами измерения уже, по типу fontsize: 16px, но когда тебе нужна только цифра для математических вычислений? Чтоб не хардкодить значение в самом миксине

@AleksanderLamkov 5 ай бұрын

Привет! Вроде как можно поделить условные 16px на 1 и Sass вычислит это в числовое значение 16. @function parseValue($value) { @return $value / 1; }

@kalts_daniil 2 ай бұрын

Отличный гайд! Спасибо огромное!) 1 вопрос: почему ты использовал в файле _variables.scss переменные через :root? До этого ты показывал переменные в scss через $ 🤔 В чем преимущество :root перед $ ? Окей, :root глобальный. Но если подключить в самом верху styles.scss файл с переменными _variables.scss, то их так же можно будет использовать во всех остальных файлах 🤔

@AleksanderLamkov 2 ай бұрын

Привет! Спасибо за фидбек :) Отвечаю на оба вопроса: каждый из типов переменных ($ от Sass и var от CSS) служит конкретной цели, Sass-переменные пропадают после компиляции SCSS => CSS и превращаются в обычные значения, а CSS-переменные работают в рантайме (в режиме реального времени при взаимодействии с веб-приложением). В большинстве случаев нам нужно, чтобы переменные работали в рантайме. Sass-переменные я использую только в тех местах, где нативные CSS-переменные не заработают в силу особенностей синтаксиса, например, в диапазонах медиазапросов или же в Sass-миксинах.

@user-do3or8jr7v 2 ай бұрын

Я загрузил в vscode плагин Live Sass Compiler без сложностей настройки scss показанного в этом видео, и по видимому всё работает. Достаточно ли того что я сделал или необходимо что то ещё? Спасибо

@AleksanderLamkov 2 ай бұрын

Да, достаточно. Я с VSCode не работал уже года три, поэтому на момент записи этого видео не вспомнил про этот плагин. Он действительно всё упрощает.

@user-do3or8jr7v 2 ай бұрын

@@AleksanderLamkov Спасибо

@evgeniy3370 2 күн бұрын

не сомотрел ещё мастер класс, но интересует вопрос, нужно ли использовать импорты в стилях, я ещё в 22году слышал такое : Это не просто запутывает, но и нарушает независимость блоков. Make sanse ?

@AleksanderLamkov 2 күн бұрын

Если не дублировать импорты, проблем не будет. Ну а если посмотреть итоговый css-файл мастер-класса, то там всё будет ок. Но признаю, Sass-импорты - deprecated, стоит заменит их на use. Просто в этом проекте и с import всё работает хорошо.

@alemorohere 5 ай бұрын

Александр, спасибо за ваш вклад. У меня во время обучения возник вопрос: Как вести записи или заметки во время обучения? Подойдет ли для этого Notion или может у вас есть альтернативные решения?

@alemorohere 5 ай бұрын

Я самоучка

@AleksanderLamkov 5 ай бұрын

Notion отлично подходит, я его использую до сих пор, когда надо что-то зафиксировать и не забыть. У меня там отдельная картотека с тезисами по разным темам собралась :)

@alemorohere 5 ай бұрын

@@AleksanderLamkov спасибо😉

@yansobol9529 5 ай бұрын

@@AleksanderLamkovспасибо за очень полезное видео. А можете сделать видео про Notion и как лучше в нем вести конспекты Заранее спасибо

@PavelChupryna Күн бұрын

Подскажите, видел как кто то копирует классы c html в scss c помошью csstractor, и они у него вставляются с вложенностью, а у меня нет. Как повторить трюк?

@AleksanderLamkov Күн бұрын

Привет! Попробуй написать о своей проблеме в телеграмм-чат нашего сообщества, скорее всего там тебе помогут: t.me/friendlyFrontendChat

@magazila 5 ай бұрын

Привет, давно к тебе не заглядывал. закончил смотреть когда еще был хтмл. А сейчас возник вопрос, а можно ли прислать свои проекты (Только хтмл цсс(сцсс) и немного джавы) на проверку и оценку?

@AleksanderLamkov 5 ай бұрын

Привет! Менторством сейчас занимаюсь редко, проверять работы нет времени, извини. Может позже запущу формат а-ля "Ревью верстки подписчиков", обязательно сообщу о этом в тг-канале: t.me/friendlyFrontend

@magazila 5 ай бұрын

@@AleksanderLamkov Да я подписан на телегу, жду инфу тогда )

@barmalejZ Ай бұрын

Эх, нет в видосе про использования @media в препроцессорах, есть ли там какие нюансы?

@AleksanderLamkov Ай бұрын

Привет! Да, надо было упомянуть, что можно вкладывать медиазапросы внутрь селекторов и что можно использовать переменные в качестве параметров медиазапросов. sass-scss.ru/documentation/pravila_i_direktivi/direktiva_media/

@RomanB-od1qn 4 ай бұрын

Каким форматировщиком пользуешься для scss?

@AleksanderLamkov 4 ай бұрын

Не совсем понял вопрос. Ты про кодстайл или про преобразование SCSS => CSS?

@RomanB-od1qn 4 ай бұрын

@@AleksanderLamkov ,именно про форматировщик типа prettier

@AleksanderLamkov 4 ай бұрын

Я на видео пока не использую, форматирую вручную. Ну а вообще, на рабочих проектах stylelint и prettier.

@pazoodelujo983 Күн бұрын

У МЕНЯ ПРОБЛЕМА. В момент, когда я запускаю компиляцию, терминал выдаёт такое Error reading styles.scss: no such file or directory. Как я понял, json не может найти мой файл, чтобы преобразовать его, но я не понимаю как это решить. Всё что я смотрел в интернете не помогает, я даже что-то с ruby делал и та же хрень. Возможно нужно стоит как-то явно указать этому слепому где находится styles.scss? но как?

@AleksanderLamkov Күн бұрын

Попробуй использовать для VSCode плагин Live Sass Compiler.

@user-do3or8jr7v 2 ай бұрын

Если проект написан с препроцессором и необходимо залить на хостинг, все ли серверы имею загруженный компелятор scss ? надо ли выяснять этот момнет? куда смотреть в параметрах хостинга? Спасибо.

@AleksanderLamkov 2 ай бұрын

На хостинг в любом случае необходимо заливать лишь .css-файлы. Исходники .scss закидывать не стоит. Даже если сервер автоматически будет преобразовать scss => css, то не советую так делать. Лучше на первых этапах обучения этот процесс контролировать самому и преобразовать файлы локально.

@user-do3or8jr7v 2 ай бұрын

@@AleksanderLamkov Спасибо Александр

@user-lp5yk3gu4y 5 күн бұрын

Дошла до этой темы, так сильно плаваю, очень расстраиваюсь, у всех так в начале ? Или это я просто не способная ? 😢😢 спасибо за видео ! 🔥

@AleksanderLamkov 5 күн бұрын

Препроцессор стилей - это инструмент автоматизации. Лично я начал его использовать спустя месяца 3 плотной работы с голым CSS. Sass решил мои боли, помог сэкономить время на рутинные задачи. Если вам пока сложно разобраться с этим инструментом, то значит вам пока рано с ним взаимодействовать. Наловчитесь с классическим CSS, познайте все его недостатки, помучайтесь, а затем уже осознанно возвращаетесь к Sass.

@user-lp5yk3gu4y 5 күн бұрын

Спасибо 🙏

@animejapan675 23 күн бұрын

Executing task: sass styles.scss styles.css Error reading styles.scss: no such file or directory. * The terminal process "D:\GIT\Git\bin\bash.exe '--login', '-i', '-c', 'sass styles.scss styles.css'" terminated with exit code: 66. * Terminal will be reused by tasks, press any key to close it. Почему выдает такую ошибку?

@AleksanderLamkov 23 күн бұрын

Привет! Не находит файл styles.scss. Попробуй для VSCode плагин Live Sass Compiler поставить и работай через него, так проще.

@PavelChupryna 2 күн бұрын

Может я что то не понял, но это видео не находится ни в одном плейлисте, что усложняет его поиск... Видео по css функциям и переменным тоже не находятся в плейлисте по css.

@AleksanderLamkov 2 күн бұрын

Добавил в отдельный плейлист "CSS": CSS kzfaq.info/sun/PL0MUAHwery4ojFkcq8PD-6ylUalMGqXfs В текущий (CSS курс) добавить не могу, т. к. тема этого видео не связана с курсом по CSS напрямую. В любом случае, спасибо за информацию!

@user-nd6cs1kz9c 3 ай бұрын

Ото ты торохтиш 😂, очень полезное видео, но, как по мне, слишком быстро излагаешь материал, хотелось бы помедленее слегка "я записываю" ))

@ukraine1514 Ай бұрын

Так скорость уменьш🤣 я на 1.5х ставлю.... Все доходчево

@kaiken9101 4 ай бұрын

некоторые вещи уже есть в CSS по умолчанию )

@AleksanderLamkov 4 ай бұрын

Например какие?)

@xaosland 2 ай бұрын

Хорошее видео, только протараторил ппц

@xMurieLLx 2 ай бұрын

changed 17 packages in 1s 3 packages are looking for funding run `npm fund` for details Вот такой вывод на npm install -g sass и, естественно, никого sass не установилось даже

@AleksanderLamkov 2 ай бұрын

Похоже, что у тебя на компьютере ранее уже был установлен Sass.

@xMurieLLx 2 ай бұрын

@@AleksanderLamkov тяк-с.... информация интересная. А как проверить, что был установлен ? И Если необходимо, как удалить и переустановить актуальную версию ? Или, если можно, как обновить, ранее установленную, до актуальной, чтобы можно было адекватно работать без каких-либо костылей ? Хотя бы, где почитать можно про такие действия с системой ?

@AleksanderLamkov 2 ай бұрын

Проверить установлен ли пакет и узнать номер его номер версии можно командой: npm -v sass Обновить пакет до последней версии можно командой: npm i -g sass@latest

@AleksanderLamkov 2 ай бұрын

Команды npm описаны тут: docs.npmjs.com/cli/v6/commands

@xMurieLLx 2 ай бұрын

@@AleksanderLamkovОтлично ! Спасибо ! После учёбы посмотрю и почитаю

@otsv-un2bd 5 ай бұрын

почему вы такой сложный способ выбрали использования scss для новичков? есть же расширение для vscode которое настраивается и управляется в один клик. а так спасибо за урок, смотрел все

@AleksanderLamkov 5 ай бұрын

Live Sass Compiler? Забыл о нем. Не пользовался VSCode уже 2.5 года, всё вылетело из головы.

@AleksanderLamkov 5 ай бұрын

Добавил в закреп информацию о расширении.

@otsv-un2bd 5 ай бұрын

да, Live Sass Compiler

@CRAZY_PUBG600K 2 ай бұрын

uzbekstan

@rocketman4072 2 ай бұрын

в ВС коде есть вотчер

@carry-on-chaos4032 5 ай бұрын

На мой взгляд миксин flex-center лучше было бы сделать как placeholder.

@AleksanderLamkov 5 ай бұрын

Не понял тебя. Что за плейсхолдер?

@carry-on-chaos4032 5 ай бұрын

я имел в виду через extend. Хотя сейчас начал читать доку, там написано что миксины как раз позволяют избегать несемантические классы, как в нашем случае flex-center, так что наверное лучше через миксин, чем через наследование

@AleksanderLamkov 5 ай бұрын

Я думаю, что mixin тут будет удобнее extends, так как в него ещё можно прокинуть аргумент, например, для значения свойства display, ведь иногда вместо flex может понадобиться inline-flex.

@carry-on-chaos4032 5 ай бұрын

extends все таки нужны для описания отношений между семантическими классами, а для несемантических правил предлагают использовать миксины.

@carry-on-chaos4032 5 ай бұрын

В том и дело, меня всегда интересовал вопрос, если у миксина нет аргументов, то почему бы не использовать абстрактный класс. Но ответ на этот вопрос в сообщении выше.

@enot_poloskun007 4 ай бұрын

Хорошее видео, правда автор так быстро говорит, что иногда приходится отматывать, в остальном все супер.

@AleksanderLamkov 4 ай бұрын

Привет! В этом видео впервые за долгое время выпуска контента изменил стиль монтажа, чтобы паузы между предложениями были естественнее и, соответственно, дольше. Жаль, что и этого темпа для комфортного усвоения материала недостаточно :( Буду думать…

@enot_poloskun007 4 ай бұрын

@@AleksanderLamkov ну это только на мой вкус, материал качественный и полезный, но ощущение будто вы его быстро зачитываете с экрана, нежели в живую все объясняете своими словами. Но есть и плюсы в таком подходе, т.к будь это в более live формате, по времени это было бы в 2-3 раза больше по времени и не каждый бы стал смотреть видео на 30-40 минут. Прошлые видео не смотрел ещё, но глянул плейлист, и приятно удивился, структура с самого начала и все самое нужное. Обязательно посмотрю про html, css и прочее, лишним не будет. Радует, что появляются такие каналы, как бы не было много видео про IT, именно в таком порядке и про все, не так часто можно найти. Мне и другим новичкам это нужно

@ilgizreklama 3 ай бұрын

Наооборот хорошо, что быстро и без воды, а то многих приходиться смотреть на скорости 1,5

@enot_poloskun007 3 ай бұрын

@@ilgizreklama кому как, это же моё личное мнение, например если бы я не знал 90%+ из этого, то пришлось бы десяток раз отматывать, искать где-то ещё подробное описание, но скорее всего даже смотреть бы не стал, а память освяжить для повторения, тут да, лучше ничего не видел для этого

@nurzhanovchanel 5 ай бұрын

В css уже есть вложеность 😊

@AleksanderLamkov 5 ай бұрын

У неё очень скудная поддержка, ну а конкатенация частей селектора (для того же БЭМа) в принципе невозможна.

@nurzhanovchanel 5 ай бұрын

@@AleksanderLamkov почему? Всё браузеры кроме дескоптного Сафари))

@AleksanderLamkov 5 ай бұрын

У десктопного сафари тот же % поддержки, что и у мобильного. Но в целом 81% суммарной поддержки - это мало и я бы не рисковал использовать в проде, пока процент не станет близок к 90. Ну а в проектах с БЭМом нативный нестинг, похоже, нельзя будет заюзать никогда.

@nurzhanovchanel 5 ай бұрын

@@AleksanderLamkov я говорю по факту, что поддержки нет только у десктопной версии Сафари. Таблица поддержки отстает и долго обновляется.

@AleksanderLamkov 5 ай бұрын

Хм, не знал про отставание актуальности caniuse.

@GrafOrdos Ай бұрын

на стартовой заглушке "ускрояем"

@AleksanderLamkov Ай бұрын

Ох. Не заметил, исправлю. Спасибо большое!)

@user-mx2lv3kv4z 2 ай бұрын

С 15 минуты уже непонятно(( Так как идёт повествование, но без наглядного примера. Для новичков сложно получилось 😢

@AleksanderLamkov 2 ай бұрын

Наглядный пример смотри в мастер-классе по верстке: kzfaq.info/sun/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU

@user-mx2lv3kv4z 2 ай бұрын

@@AleksanderLamkov благодарю, попробую сверстать

@web__pavlovo 5 ай бұрын

Привет инженер из вк.почему музыку на заблокируемом телефоне нельзя слушать,а видео слушать можно?

@AleksanderLamkov 5 ай бұрын

Посовещавшись коллективным разумом с тысячей других разработчиков компании, ответа у меня не появилось :)

@smartcompany11 5 ай бұрын

Очевидно что музыка и видео это два разных сервиса)

@web__pavlovo 5 ай бұрын

@@smartcompany11 ны ты просто уммм

@LLuKKen Ай бұрын

Такое ощущение, что ты куда то спешишь. У тебя суп варится на плите, или ты во время обеденного перерыва ролики записываешь?

@AleksanderLamkov Ай бұрын

На ютубе можно выставить увеличенную или уменьшенную скорость воспроизведения. Поставь 0.75, может будет получше.

@gabbergabberovich 24 күн бұрын

Устаревшая технология, которая уже не используется после появления нативных CSS переменных и calc. Так же она не работает при разработке приложений и сайтов на удаленном дев-окружении. Да и по факту от нее больше проблем чем каких-либо осязаемых преимуществ.

@AleksanderLamkov 24 күн бұрын

CSS-переменные поддерживаются всеми браузерами 7 последних лет. Я пришел в разработку 4 года назад. Всю мою карьеру, начиная от маленькой веб-студии, заканчивая текущим местом работы в бигтехе, я пишу стили с использованием препроцессора стилей. Выводы сделайте сами.

@BohdanTrotsenko 19 күн бұрын

how is it going in ruzzia?

@Mylovemusic-fl7ob 9 күн бұрын

Чтоб ты понимал братюня... начинающий - это Я, и я использую note pad ++, а про VSCode я узнал недавно от украинского блогера, который к сожалению лучше чем ты понимает состояние новичка/начинающего и умеет действительно по настоящему методично и по полочкам объяснять что к чему, зачем и для чего. Ты же сильно торопишься. Такое впечатление, что твоя задача быстро и бегло выложить материал, а понял тебя кто-то или нет, это уже не твоя проблема, была бы статистика просмотров и комментариев, а там пофиг на остальное. Бесспорно контент интересный но трудноусвояемый ввиду такой специфический подачи материала, я бы сказал не для широкого спектра людей.

@AleksanderLamkov 9 күн бұрын

Мой контент на канале с самого его основания идёт последовательно от теме к теме, где я разжевываю всё, от IDE до последних тем по JS на канале. Если зритель ознакомился со всем контентом до этого (включая мастер-класс, вышедший ДО этого гайда по Sass), то ему будет понятно всё из этого видео. Если ты считаешь, что я должен подстраивать каждое свое видео под «абсолютно большинство», то нет, ты не прав. Я делаю так, как хочу, так, как умею, следую своему заранее намеченному плану. Над темпом речи я работаю, но сильно замедлить его вряд ли когда-нибудь получится. Если тебя не устраивает моя подача, не смотри. Я же найду «своего» зрителя. Да и, кажется, уже нашел, судя по статистике роста аудитории.

@evgeniy3370 2 күн бұрын

Это Женя что ли, который фрилансер по жизни ?

@CanumVenaticorum 4 ай бұрын

Чистый CSS "редко используют" только не самые компетентные разработчики)) Потому что актуальный css своими фичами мало чем отличается от препроцессоров. А вот недостатки у последних весьма критичны могут быть.

@AleksanderLamkov 4 ай бұрын

Чистый CSS и его новая мертворожденная фича нестинга не дружит с конкатенацией классов, например, чтобы удобно писать селекторы БЭМ элементов. Так что без процессоров пока сложно.

@CanumVenaticorum 4 ай бұрын

@@AleksanderLamkov это самая большая дичь в scss, которую большинство преподносит как "фичу" - привязываться к структуре кода... в чём вообще проблема? много времени уходит на написание классов? ctrl+c ctrl+v)) ещё и медиазапросы распихивают по этим огрызкам, вместо того чтобы собрать всё вместе...

@AleksanderLamkov 4 ай бұрын

Медиазапросы локально расположенные в селекторах то чем не угодили? Удобно ведь. Не нужно один и тот же селектор по разным местам искать.

@CanumVenaticorum 4 ай бұрын

@@AleksanderLamkov потому что в начале пишешь стили под десктоп (или наоборот), а потом под мобилу. а именно что не лазишь по всем селекторам с миксинами (или что там). а подход scss подразумевает что пишешь стили для элемента и тут же медиазапрос

@AleksanderLamkov 4 ай бұрын

Твое мнение имеет место быть, но я с тобой не соглашусь, мне удобнее держать медиазапросы локально, чтобы сразу видеть, что происходит с элементом на разных диапазонах экрана.

@user-ww8ll9nn7m 27 күн бұрын

PostCSS - препроцессор? О_О Ну и использовать Sass в 2024... Такое.

@AleksanderLamkov 27 күн бұрын

Не препроцессор, а постпроцессор?) Из разряда «реакт не фреймворк». Душно. Ну а про «использовать Sass в 2024-м» вообще не понимаю предъявы. То, что в чистом CSS завезли синтаксис вложенных селекторов, ещё не значит, что весь смысл препроцессоров сводится к нулю.