1. Для VSCode оказывается есть расширение Live Sass Compiler: marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass. Можно через него работать с SCSS также удобно, как в WebStorm. 2. Всем, кто задается вопросом, зачем нужны CSS-переменные, если есть Sass-переменные, прочитайте мой пост: t.me/friendlyFrontend/318
@sartjhon330011 ай бұрын
только хотел написать об этом. зачем этот велосипед с json.task )
@OlegNaumov-me6yj9 ай бұрын
Странно что вы раньше этого не знали.
@AleksanderLamkov9 ай бұрын
Потому что с VSCode не работал уже года три. Забыл уже что такое «плагин для IDE», в вебшторм всё есть «изкоробки».
@МихаилЛихачёв-ч5ш8 ай бұрын
@@OlegNaumov-me6yj Здесь ничего удивительного нет! Знаешь ту программу, в которой постоянно работаешь, а работаешь в той проге, которую знаешь. Как-то так.
@nik_user752 ай бұрын
@@AleksanderLamkov современный css может тоже что и Sass (SCSS)
@ivenzoАй бұрын
Ох, изучаю фронтенд, и столько всего слышал про SASS SCSS, думал, что такой страшный зверь, а ты так все раскидал, так последовательно. Респект тебе и твоим рукам. Спасибо! 🙂
@alexb.261611 ай бұрын
Блин, я даже не знаю, что сказать... Саша, это лучший подрок на новый год! Именно то, что нужно прямо сейчас!!! Фронтенд Дед Мороз не носит бороды. И подарки он доставляет не со снегурочкой, с котом из VK. Спасибо тебе большое!
@VitaliAdamskyАй бұрын
Пацан, чёткое видео! Спасибо! Не знаю сколько тебе лет, но с такими молодыми людьми у страны есть будущее!
@aswarriorr8 ай бұрын
Если можно было бы ставить лайк при каждом разом включая это видео ,я бы это делал не задумываясь ! Респект тебе !
@РусланИванов-и5х11 ай бұрын
Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?
@MsDlovar11 ай бұрын
Спасибо за полезное видео. Хотелось бы мастер класс по верстке с использованием всех этих преимуществ.
@AleksanderLamkov11 ай бұрын
Обязательно будет! В середине января примерно.
@dondiablopablo10 ай бұрын
Отличное видео, всё по полочкам, всё понятно, вот прям то, что нужно, супер формат! До этого смотрел другие видео на подобную тему и есть чем сравнить.
@Ivanfwit9 ай бұрын
отличное видео, спасибо! ждем продолжение про scss и другие препроцессоры)
@exacreator9 ай бұрын
Максимально полезное видео, спасибо большое ❤
@LAMit2 ай бұрын
Спасибо за урок!
@solula174410 ай бұрын
Очень круто, все понятно! Большое спасибо)
@ВиталийЮркин-м7п8 ай бұрын
Спасибо Огромное! Очень помог. Как раз Live Sass Compiler перестал работать. Полдня искал альтернативу :)
@Rxx-i6m2 ай бұрын
Спасибо за хороший урок
@MrJettann11 ай бұрын
Привет, видео получилось интересным! Хотел спросить, есть ли какой способ, чтобы в миксинах использовать css переменные, но которые идут с единицами измерения уже, по типу fontsize: 16px, но когда тебе нужна только цифра для математических вычислений? Чтоб не хардкодить значение в самом миксине
@AleksanderLamkov11 ай бұрын
Привет! Вроде как можно поделить условные 16px на 1 и Sass вычислит это в числовое значение 16. @function parseValue($value) { @return $value / 1; }
@kalts_daniil8 ай бұрын
Отличный гайд! Спасибо огромное!) 1 вопрос: почему ты использовал в файле _variables.scss переменные через :root? До этого ты показывал переменные в scss через $ 🤔 В чем преимущество :root перед $ ? Окей, :root глобальный. Но если подключить в самом верху styles.scss файл с переменными _variables.scss, то их так же можно будет использовать во всех остальных файлах 🤔
@AleksanderLamkov8 ай бұрын
Привет! Спасибо за фидбек :) Отвечаю на оба вопроса: каждый из типов переменных ($ от Sass и var от CSS) служит конкретной цели, Sass-переменные пропадают после компиляции SCSS => CSS и превращаются в обычные значения, а CSS-переменные работают в рантайме (в режиме реального времени при взаимодействии с веб-приложением). В большинстве случаев нам нужно, чтобы переменные работали в рантайме. Sass-переменные я использую только в тех местах, где нативные CSS-переменные не заработают в силу особенностей синтаксиса, например, в диапазонах медиазапросов или же в Sass-миксинах.
@Anatoli-bq1pe5 ай бұрын
Благодарю за очень полезный видос!
@axis993427 күн бұрын
Тоесть например класс контейнер, можно сделать миксином и просто вызывать его, я правильнно понял, спасибо за ваши уроки!
@AleksanderLamkov27 күн бұрын
Да, но я бы так не стал делать для container. Посмотри мой второй мастер-класс на канале, а именно как там используются Sass-миксины.
@ВиталийДавыдов-э4г8 ай бұрын
Я загрузил в vscode плагин Live Sass Compiler без сложностей настройки scss показанного в этом видео, и по видимому всё работает. Достаточно ли того что я сделал или необходимо что то ещё? Спасибо
@AleksanderLamkov8 ай бұрын
Да, достаточно. Я с VSCode не работал уже года три, поэтому на момент записи этого видео не вспомнил про этот плагин. Он действительно всё упрощает.
@ВиталийДавыдов-э4г8 ай бұрын
@@AleksanderLamkov Спасибо
@biscvie8 ай бұрын
Спасибо!
@_SOMEONE_10 ай бұрын
Спасибо огромное!
@АлександрСальников-с2ж3 ай бұрын
Коммент в поддержку
@VL4STEL1N10 ай бұрын
Отличные гайды у тебя! Респект )
@alemorohere11 ай бұрын
Александр, спасибо за ваш вклад. У меня во время обучения возник вопрос: Как вести записи или заметки во время обучения? Подойдет ли для этого Notion или может у вас есть альтернативные решения?
@alemorohere11 ай бұрын
Я самоучка
@AleksanderLamkov11 ай бұрын
Notion отлично подходит, я его использую до сих пор, когда надо что-то зафиксировать и не забыть. У меня там отдельная картотека с тезисами по разным темам собралась :)
@alemorohere11 ай бұрын
@@AleksanderLamkov спасибо😉
@yansobol952911 ай бұрын
@@AleksanderLamkovспасибо за очень полезное видео. А можете сделать видео про Notion и как лучше в нем вести конспекты Заранее спасибо
@ЕленаКонциялова-ю9к4 ай бұрын
Крутой видос, спасибо.)
@АндрейШтольц-л4ю11 ай бұрын
Как всегда отличный урок! Раскройте, пожалуйста, тему правила @use, особенно в контексте подключения медиа-запросов. Спасибо.
@AleksanderLamkov11 ай бұрын
Привет! Постараюсь в мастер-классе использовать @use для медиазапросов.
@Aluston17837 ай бұрын
Классный гайд!
@magazila11 ай бұрын
Привет, давно к тебе не заглядывал. закончил смотреть когда еще был хтмл. А сейчас возник вопрос, а можно ли прислать свои проекты (Только хтмл цсс(сцсс) и немного джавы) на проверку и оценку?
@AleksanderLamkov11 ай бұрын
Привет! Менторством сейчас занимаюсь редко, проверять работы нет времени, извини. Может позже запущу формат а-ля "Ревью верстки подписчиков", обязательно сообщу о этом в тг-канале: t.me/friendlyFrontend
@magazila11 ай бұрын
@@AleksanderLamkov Да я подписан на телегу, жду инфу тогда )
@un_defined6 ай бұрын
спасибо
@ilyashokhovАй бұрын
Вот бы свежее видео о scss и vue3
@AleksanderLamkovАй бұрын
Увы, Vue совсем не мой стек. А вот про Sass будет скоро ролик, где крутой адаптивный шрифт покажу через миксины и функции Sass.
@evgeniy33706 ай бұрын
не сомотрел ещё мастер класс, но интересует вопрос, нужно ли использовать импорты в стилях, я ещё в 22году слышал такое : Это не просто запутывает, но и нарушает независимость блоков. Make sanse ?
@AleksanderLamkov6 ай бұрын
Если не дублировать импорты, проблем не будет. Ну а если посмотреть итоговый css-файл мастер-класса, то там всё будет ок. Но признаю, Sass-импорты - deprecated, стоит заменит их на use. Просто в этом проекте и с import всё работает хорошо.
@erhack_5 ай бұрын
ошибка: scss : Имя "scss" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте п равильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + scss styles.scss styles.css + ~~~~ + CategoryInfo : ObjectNotFound: (scss:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
@AleksanderLamkov5 ай бұрын
Нужно в начале команды не "scss" указывать, а "sass". А вообще, если у тебя VSCode, можешь не мучаться с командами и установить плагин Live Sass Compiler поставить. С ним попроще будет.
@diver20485 ай бұрын
Отличный урок, лишь пара замечаний. Первое: в VS Code так же есть расширения, автоматизирующие работу с SASS. И второе: амперсанД пишется с Д на конце))
@КраснаяКошка-м5о4 ай бұрын
С 5:20 ничего не получается. Команда в терминале выдает ошибку. Как-то криво установила nodejs
@AleksanderLamkov4 ай бұрын
Напиши чуть подробнее о проблеме нам в чат: t.me/friendlyFrontendChat Там точно помогут разобраться. Ну а навскидку - если у тебя VSCode, попробуй установить плагин Live Sass Compiler, он сам всё будет компилировать и вроде как не нужно будет возиться с установкой NodeJS.
@akylbekbaizakov5 ай бұрын
👍
@IgorIvchenko-l5x9 ай бұрын
Ото ты торохтиш 😂, очень полезное видео, но, как по мне, слишком быстро излагаешь материал, хотелось бы помедленее слегка "я записываю" ))
@ukraine15146 ай бұрын
Так скорость уменьш🤣 я на 1.5х ставлю.... Все доходчево
@RomanB-od1qn10 ай бұрын
Каким форматировщиком пользуешься для scss?
@AleksanderLamkov10 ай бұрын
Не совсем понял вопрос. Ты про кодстайл или про преобразование SCSS => CSS?
@RomanB-od1qn10 ай бұрын
@@AleksanderLamkov ,именно про форматировщик типа prettier
@AleksanderLamkov10 ай бұрын
Я на видео пока не использую, форматирую вручную. Ну а вообще, на рабочих проектах stylelint и prettier.
@riodejaneiro84915 ай бұрын
а не проще ли использовать команду sass --watch style.scss:style.css в терминале чем устанавливать и настраивать стороннее приложение?
@AleksanderLamkov5 ай бұрын
Проще один раз настроить, чтобы потом запускать одной кнопкой. А ещё лучше - поставить плагин Live Sass Compiler.
@barmalejZ7 ай бұрын
Эх, нет в видосе про использования @media в препроцессорах, есть ли там какие нюансы?
@AleksanderLamkov7 ай бұрын
Привет! Да, надо было упомянуть, что можно вкладывать медиазапросы внутрь селекторов и что можно использовать переменные в качестве параметров медиазапросов. sass-scss.ru/documentation/pravila_i_direktivi/direktiva_media/
@animejapan6756 ай бұрын
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. Почему выдает такую ошибку?
@AleksanderLamkov6 ай бұрын
Привет! Не находит файл styles.scss. Попробуй для VSCode плагин Live Sass Compiler поставить и работай через него, так проще.
@БілоногОлександрАй бұрын
Я так понимаю ты в сасе класы влажуеш в тегы? это фишка саса? или розкажи поподробнее
@AleksanderLamkovАй бұрын
Ранее возможность вкладывать селекторы друг в друга была только при использовании препроцессора стилей, в частности, Sass. Сейчас такая возможность (пусть и урезанная) есть и в чистом CSS, но пока плохо поддерживается браузерами. Ну а в Sass фишка вложенности всегда была, все ею пользуются до сих пор. Вот с этого таймкода рассказываю про эту фишку: kzbin.info/www/bejne/pnO2lJtrdth9jdU
@kaiken910110 ай бұрын
некоторые вещи уже есть в CSS по умолчанию )
@AleksanderLamkov10 ай бұрын
Например какие?)
@pazoodelujo9835 ай бұрын
У МЕНЯ ПРОБЛЕМА. В момент, когда я запускаю компиляцию, терминал выдаёт такое Error reading styles.scss: no such file or directory. Как я понял, json не может найти мой файл, чтобы преобразовать его, но я не понимаю как это решить. Всё что я смотрел в интернете не помогает, я даже что-то с ruby делал и та же хрень. Возможно нужно стоит как-то явно указать этому слепому где находится styles.scss? но как?
@AleksanderLamkov5 ай бұрын
Попробуй использовать для VSCode плагин Live Sass Compiler.
@PavelChupryna6 ай бұрын
Может я что то не понял, но это видео не находится ни в одном плейлисте, что усложняет его поиск... Видео по css функциям и переменным тоже не находятся в плейлисте по css.
@AleksanderLamkov6 ай бұрын
Добавил в отдельный плейлист "CSS": CSS kzbin.info/aero/PL0MUAHwery4ojFkcq8PD-6ylUalMGqXfs В текущий (CSS курс) добавить не могу, т. к. тема этого видео не связана с курсом по CSS напрямую. В любом случае, спасибо за информацию!
@НигинаЗарипова-т4ц6 ай бұрын
Дошла до этой темы, так сильно плаваю, очень расстраиваюсь, у всех так в начале ? Или это я просто не способная ? 😢😢 спасибо за видео ! 🔥
@AleksanderLamkov6 ай бұрын
Препроцессор стилей - это инструмент автоматизации. Лично я начал его использовать спустя месяца 3 плотной работы с голым CSS. Sass решил мои боли, помог сэкономить время на рутинные задачи. Если вам пока сложно разобраться с этим инструментом, то значит вам пока рано с ним взаимодействовать. Наловчитесь с классическим CSS, познайте все его недостатки, помучайтесь, а затем уже осознанно возвращаетесь к Sass.
@НигинаЗарипова-т4ц6 ай бұрын
Спасибо 🙏
@LAMit2 ай бұрын
У меня тоже так было. Не нужно расстраивать все придет в свое время, просто продолжай заниматься.
@PavelChupryna5 ай бұрын
Подскажите, видел как кто то копирует классы c html в scss c помошью csstractor, и они у него вставляются с вложенностью, а у меня нет. Как повторить трюк?
@AleksanderLamkov5 ай бұрын
Привет! Попробуй написать о своей проблеме в телеграмм-чат нашего сообщества, скорее всего там тебе помогут: t.me/friendlyFrontendChat
@LAMit2 ай бұрын
1. Необходим плагин (расширение) в VSCode -- "eCSStractor for VSCode". (Установить можно из "Управление --> Расширения --> eCSStractor, в поисковой строке"). 2. В VSCode кликаем на шестеренку в левом нижнем углу ("Управление"). 3. Выбираем "Сочетания клавиш". 4. Для копирования классов в поисковой строке вводим - "eCSStractor Run". 5. Назначаем удобное сочетание клавиш (к примеру - + + ). 6. Для копирования классов по BEM в scss поисковой строке вводим - "eCSStractor Run (With BEM Nesting)". 7. Назначаем удобное сочетание клавиш (к примеру - + + ). Использование: 1. Выделяем родительский блок от div до /div из которого хотим перенести классы в SCSS. 2. Нажимаем установленное (выше) сочетание клавиш (копируем, как бэм-классы). 3. Переходим в файл.scss, нажимаем "вставить". Радуемся жизни!
@denishaleckiy8303Ай бұрын
Не понимаю, а если html файлов станет много, они все должны вытягивать стили с общего styles.scss? Почему им просто не брать нужные блоки самим, это же, вроде как, логичнее
@AleksanderLamkovАй бұрын
Такая оптимизация хороша в теории, но на практике так делают редко. Во-первых, браузер не может читать scss-файлы. Только итоговый обработанный препроцессором css-файл. Обработка эта зачастую происходит локально, на этапе разработки, на компьютере фронтенд-разработчика. Во-вторых, нет такого инструмента, который безошибочно проанализирует разметку конкретной страницы и соберет «наверняка минималистичный» единый CSS-файл по SCSS-кусочкам. Проблема в том, что не вся разметка присутствует в html-файле изначально. Какая-то рисуется джаваскриптом. А какая-то вовсе приходит с сервера отдельным запросом и, опять же, рисуется скриптом. Миллион нюансов, которые крайне сложно учесть при анализе страницы. В-третьих, выигрываем в производительности не так много, как кажется. Если стили написаны грамотно, без лишних систематических дублирований наборов правил, то выигрыш при описанном тобою подходе будет несущественным.
@otsv-un2bd11 ай бұрын
почему вы такой сложный способ выбрали использования scss для новичков? есть же расширение для vscode которое настраивается и управляется в один клик. а так спасибо за урок, смотрел все
@AleksanderLamkov11 ай бұрын
Live Sass Compiler? Забыл о нем. Не пользовался VSCode уже 2.5 года, всё вылетело из головы.
@AleksanderLamkov11 ай бұрын
Добавил в закреп информацию о расширении.
@otsv-un2bd11 ай бұрын
да, Live Sass Compiler
@Dark-Fantasys3 ай бұрын
5:30 у меня винда 11, выдает ошибку при попытке ввести команду: "Имя npm не распознано как имя командлета, функции, файла сценария или выполнения программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка: 1 знак: 1 ..."
@AleksanderLamkov3 ай бұрын
Скинь скриншот ошибки в чат, тебе помогут: t.me/friendlyFrontendChat
@enot_poloskun00710 ай бұрын
Хорошее видео, правда автор так быстро говорит, что иногда приходится отматывать, в остальном все супер.
@AleksanderLamkov10 ай бұрын
Привет! В этом видео впервые за долгое время выпуска контента изменил стиль монтажа, чтобы паузы между предложениями были естественнее и, соответственно, дольше. Жаль, что и этого темпа для комфортного усвоения материала недостаточно :( Буду думать…
@enot_poloskun00710 ай бұрын
@@AleksanderLamkov ну это только на мой вкус, материал качественный и полезный, но ощущение будто вы его быстро зачитываете с экрана, нежели в живую все объясняете своими словами. Но есть и плюсы в таком подходе, т.к будь это в более live формате, по времени это было бы в 2-3 раза больше по времени и не каждый бы стал смотреть видео на 30-40 минут. Прошлые видео не смотрел ещё, но глянул плейлист, и приятно удивился, структура с самого начала и все самое нужное. Обязательно посмотрю про html, css и прочее, лишним не будет. Радует, что появляются такие каналы, как бы не было много видео про IT, именно в таком порядке и про все, не так часто можно найти. Мне и другим новичкам это нужно
@ilgizreklama9 ай бұрын
Наооборот хорошо, что быстро и без воды, а то многих приходиться смотреть на скорости 1,5
@enot_poloskun0079 ай бұрын
@@ilgizreklama кому как, это же моё личное мнение, например если бы я не знал 90%+ из этого, то пришлось бы десяток раз отматывать, искать где-то ещё подробное описание, но скорее всего даже смотреть бы не стал, а память освяжить для повторения, тут да, лучше ничего не видел для этого
@asante5979Ай бұрын
У меня в обычном CSS вложения работают, почему это подают как фишку SCSS?
@AleksanderLamkovАй бұрын
Потому что в CSS эта фишка появилась сравнительно недавно. Да и в CSS она всё же по-другому работает, нежели в Sass.
@asante5979Ай бұрын
@@AleksanderLamkov А, интересно. А в чем отличия? На первый взгляд реализация 1 в 1
@AleksanderLamkovАй бұрын
Отличия в конкатенации (соединении) имен классов. В Sass можно так: .header { &__button { … } } И это преобразуется в: .header__button { … } А в CSS такой синтаксис: .header { &__button { … } } В принципе будет невалидным.
@asante5979Ай бұрын
@@AleksanderLamkov А, понял. Просто не считал это частью самого вложения, а скорее форматом записи селектора. Спасибо за ответ!
@ВиталийДавыдов-э4г8 ай бұрын
Если проект написан с препроцессором и необходимо залить на хостинг, все ли серверы имею загруженный компелятор scss ? надо ли выяснять этот момнет? куда смотреть в параметрах хостинга? Спасибо.
@AleksanderLamkov8 ай бұрын
На хостинг в любом случае необходимо заливать лишь .css-файлы. Исходники .scss закидывать не стоит. Даже если сервер автоматически будет преобразовать scss => css, то не советую так делать. Лучше на первых этапах обучения этот процесс контролировать самому и преобразовать файлы локально.
@ВиталийДавыдов-э4г8 ай бұрын
@@AleksanderLamkov Спасибо Александр
@xMurieLLx8 ай бұрын
changed 17 packages in 1s 3 packages are looking for funding run `npm fund` for details Вот такой вывод на npm install -g sass и, естественно, никого sass не установилось даже
@AleksanderLamkov8 ай бұрын
Похоже, что у тебя на компьютере ранее уже был установлен Sass.
@xMurieLLx8 ай бұрын
@@AleksanderLamkov тяк-с.... информация интересная. А как проверить, что был установлен ? И Если необходимо, как удалить и переустановить актуальную версию ? Или, если можно, как обновить, ранее установленную, до актуальной, чтобы можно было адекватно работать без каких-либо костылей ? Хотя бы, где почитать можно про такие действия с системой ?
@AleksanderLamkov8 ай бұрын
Проверить установлен ли пакет и узнать номер его номер версии можно командой: npm -v sass Обновить пакет до последней версии можно командой: npm i -g sass@latest
@AleksanderLamkov8 ай бұрын
Команды npm описаны тут: docs.npmjs.com/cli/v6/commands
@xMurieLLx8 ай бұрын
@@AleksanderLamkovОтлично ! Спасибо ! После учёбы посмотрю и почитаю
@xaosland8 ай бұрын
Хорошее видео, только протараторил ппц
@rocketman40728 ай бұрын
в ВС коде есть вотчер
@olegkapkaev69113 ай бұрын
дротота какая-то, вот зачем все это нужно!? ведь в итоге после преобразования получается ровно такой же файл css....
@olegkapkaev69113 ай бұрын
20:00 - твой результат в виде CSS файла содержит все тот же ДУБЛИРОВАННЫЙ КОД для разных классов CSS, только ты трахался со всеми этими препроцессорами туеву хучу времени чтобы это все было написано ими? :))))) ну круто чо!
@AleksanderLamkov3 ай бұрын
Если не видишь для себя пользы в препроцессоре, то этот инструмент тебе пока не нужен. Миксины, функции, циклы и более удобная вложенность с возможностью конкатенации классов - то, за что препроцессоры стилей используют.
@olegkapkaev69113 ай бұрын
@@AleksanderLamkov ты не для меня пользу покажи, а пользу для проекта, ведь в CSS файле так и остались ровно те же стили с тем же одинаковым кодом, или ты будешь это оспаривать? там ведь в 2х разных классах повторяются одинаковые строки...
@AleksanderLamkov3 ай бұрын
Давай разделим понятия "польза для конечного пользователя продукта", то есть польза для посетителя сайта и "польза для проекта", то есть польза для разработчиков и владельцев бизнеса. Да, для конечного пользователя ничего не меняется - он как загружал сайт за N секунд, так и продолжит его загружать за то же время. Но вот бизнес, который тебе, как разработчику, платит деньги, получит неоспоримый профит от внедрения препроцессора стилей во фронтенд часть проекта. За счёт внедрения на проекте инструментов автоматизации оптимизируется кодовая база, она становится более понятной для разработчиков (текущих и будущих), то есть непосредственно улучшается DX (Developer Experience). Владельцу бизнеса будет куда проще (читай - де-ше-вле) нанять нового разработчика в продукт, где в одном CSS-файле не хаотичная свалка на 100 тысяч строчек, а где стили всех компонентов разбиты на отдельные SCSS-файлы, где есть система из миксинов и функций, упрощающая работу над продуктом. Надеюсь, я тебя переубедил или, хотя бы, дал новую информацию к размышлению :)
@olegkapkaev69113 ай бұрын
@@AleksanderLamkov это все понятно, НО в видео - ты четко говоришь о том что "вот в CSS файле повторяется код..." и как бы подразумевается что ты от этого избавишься, чтобы работало и не повторялось! Но по факту - все так и остается.. вот что меня возмутило.... а вовсе не экономия заказчика... кроме того можно банально разбивать огромные CSS файлы на удобные и быстро прогружаемые, в общем оптимизация она разная... и даже бывает для конечного посетителя сайта...
@CanumVenaticorum10 ай бұрын
Чистый CSS "редко используют" только не самые компетентные разработчики)) Потому что актуальный css своими фичами мало чем отличается от препроцессоров. А вот недостатки у последних весьма критичны могут быть.
@AleksanderLamkov10 ай бұрын
Чистый CSS и его новая мертворожденная фича нестинга не дружит с конкатенацией классов, например, чтобы удобно писать селекторы БЭМ элементов. Так что без процессоров пока сложно.
@CanumVenaticorum10 ай бұрын
@@AleksanderLamkov это самая большая дичь в scss, которую большинство преподносит как "фичу" - привязываться к структуре кода... в чём вообще проблема? много времени уходит на написание классов? ctrl+c ctrl+v)) ещё и медиазапросы распихивают по этим огрызкам, вместо того чтобы собрать всё вместе...
@AleksanderLamkov10 ай бұрын
Медиазапросы локально расположенные в селекторах то чем не угодили? Удобно ведь. Не нужно один и тот же селектор по разным местам искать.
@CanumVenaticorum10 ай бұрын
@@AleksanderLamkov потому что в начале пишешь стили под десктоп (или наоборот), а потом под мобилу. а именно что не лазишь по всем селекторам с миксинами (или что там). а подход scss подразумевает что пишешь стили для элемента и тут же медиазапрос
@AleksanderLamkov10 ай бұрын
Твое мнение имеет место быть, но я с тобой не соглашусь, мне удобнее держать медиазапросы локально, чтобы сразу видеть, что происходит с элементом на разных диапазонах экрана.
@carry-on-chaos403211 ай бұрын
На мой взгляд миксин flex-center лучше было бы сделать как placeholder.
@AleksanderLamkov11 ай бұрын
Не понял тебя. Что за плейсхолдер?
@carry-on-chaos403211 ай бұрын
я имел в виду через extend. Хотя сейчас начал читать доку, там написано что миксины как раз позволяют избегать несемантические классы, как в нашем случае flex-center, так что наверное лучше через миксин, чем через наследование
@AleksanderLamkov11 ай бұрын
Я думаю, что mixin тут будет удобнее extends, так как в него ещё можно прокинуть аргумент, например, для значения свойства display, ведь иногда вместо flex может понадобиться inline-flex.
@carry-on-chaos403211 ай бұрын
extends все таки нужны для описания отношений между семантическими классами, а для несемантических правил предлагают использовать миксины.
@carry-on-chaos403211 ай бұрын
В том и дело, меня всегда интересовал вопрос, если у миксина нет аргументов, то почему бы не использовать абстрактный класс. Но ответ на этот вопрос в сообщении выше.
@nurzhanovchanel10 ай бұрын
В css уже есть вложеность 😊
@AleksanderLamkov10 ай бұрын
У неё очень скудная поддержка, ну а конкатенация частей селектора (для того же БЭМа) в принципе невозможна.
@nurzhanovchanel10 ай бұрын
@@AleksanderLamkov почему? Всё браузеры кроме дескоптного Сафари))
@AleksanderLamkov10 ай бұрын
У десктопного сафари тот же % поддержки, что и у мобильного. Но в целом 81% суммарной поддержки - это мало и я бы не рисковал использовать в проде, пока процент не станет близок к 90. Ну а в проектах с БЭМом нативный нестинг, похоже, нельзя будет заюзать никогда.
@nurzhanovchanel10 ай бұрын
@@AleksanderLamkov я говорю по факту, что поддержки нет только у десктопной версии Сафари. Таблица поддержки отстает и долго обновляется.
@AleksanderLamkov10 ай бұрын
Хм, не знал про отставание актуальности caniuse.
@CRAZY_PUBG600K8 ай бұрын
uzbekstan
@Dark-Fantasys3 ай бұрын
5:17 ты проговорил "Пробел, джи, пробел, сасс", но написал при этом "-g"
@AleksanderLamkov3 ай бұрын
Оговорился) Спасибо, что заметил!
@web__pavlovo11 ай бұрын
Привет инженер из вк.почему музыку на заблокируемом телефоне нельзя слушать,а видео слушать можно?
@AleksanderLamkov11 ай бұрын
Посовещавшись коллективным разумом с тысячей других разработчиков компании, ответа у меня не появилось :)
@smartcompany1111 ай бұрын
Очевидно что музыка и видео это два разных сервиса)
@web__pavlovo11 ай бұрын
@@smartcompany11 ны ты просто уммм
@AllFishingRu8 ай бұрын
С 15 минуты уже непонятно(( Так как идёт повествование, но без наглядного примера. Для новичков сложно получилось 😢
@AleksanderLamkov8 ай бұрын
Наглядный пример смотри в мастер-классе по верстке: kzbin.info/aero/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU
@AllFishingRu8 ай бұрын
@@AleksanderLamkov благодарю, попробую сверстать
@gabbergabberovich6 ай бұрын
Устаревшая технология, которая уже не используется после появления нативных CSS переменных и calc. Так же она не работает при разработке приложений и сайтов на удаленном дев-окружении. Да и по факту от нее больше проблем чем каких-либо осязаемых преимуществ.
@AleksanderLamkov6 ай бұрын
CSS-переменные поддерживаются всеми браузерами 7 последних лет. Я пришел в разработку 4 года назад. Всю мою карьеру, начиная от маленькой веб-студии, заканчивая текущим местом работы в бигтехе, я пишу стили с использованием препроцессора стилей. Выводы сделайте сами.
@GrafOrdos7 ай бұрын
на стартовой заглушке "ускрояем"
@AleksanderLamkov7 ай бұрын
Ох. Не заметил, исправлю. Спасибо большое!)
@BohdanTrotsenko6 ай бұрын
how is it going in ruzzia?
@LLuKKen7 ай бұрын
Такое ощущение, что ты куда то спешишь. У тебя суп варится на плите, или ты во время обеденного перерыва ролики записываешь?
@AleksanderLamkov7 ай бұрын
На ютубе можно выставить увеличенную или уменьшенную скорость воспроизведения. Поставь 0.75, может будет получше.
@Mylovemusic-fl7ob6 ай бұрын
Чтоб ты понимал братюня... начинающий - это Я, и я использую note pad ++, а про VSCode я узнал недавно от украинского блогера, который к сожалению лучше чем ты понимает состояние новичка/начинающего и умеет действительно по настоящему методично и по полочкам объяснять что к чему, зачем и для чего. Ты же сильно торопишься. Такое впечатление, что твоя задача быстро и бегло выложить материал, а понял тебя кто-то или нет, это уже не твоя проблема, была бы статистика просмотров и комментариев, а там пофиг на остальное. Бесспорно контент интересный но трудноусвояемый ввиду такой специфический подачи материала, я бы сказал не для широкого спектра людей.
@AleksanderLamkov6 ай бұрын
Мой контент на канале с самого его основания идёт последовательно от теме к теме, где я разжевываю всё, от IDE до последних тем по JS на канале. Если зритель ознакомился со всем контентом до этого (включая мастер-класс, вышедший ДО этого гайда по Sass), то ему будет понятно всё из этого видео. Если ты считаешь, что я должен подстраивать каждое свое видео под «абсолютно большинство», то нет, ты не прав. Я делаю так, как хочу, так, как умею, следую своему заранее намеченному плану. Над темпом речи я работаю, но сильно замедлить его вряд ли когда-нибудь получится. Если тебя не устраивает моя подача, не смотри. Я же найду «своего» зрителя. Да и, кажется, уже нашел, судя по статистике роста аудитории.
@evgeniy33706 ай бұрын
Это Женя что ли, который фрилансер по жизни ?
@денис-к-а6 ай бұрын
PostCSS - препроцессор? О_О Ну и использовать Sass в 2024... Такое.
@AleksanderLamkov6 ай бұрын
Не препроцессор, а постпроцессор?) Из разряда «реакт не фреймворк». Душно. Ну а про «использовать Sass в 2024-м» вообще не понимаю предъявы. То, что в чистом CSS завезли синтаксис вложенных селекторов, ещё не значит, что весь смысл препроцессоров сводится к нулю.