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

  Рет қаралды 31,985

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

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

Күн бұрын

Пікірлер: 182
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
1. Для VSCode оказывается есть расширение Live Sass Compiler: marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass. Можно через него работать с SCSS также удобно, как в WebStorm. 2. Всем, кто задается вопросом, зачем нужны CSS-переменные, если есть Sass-переменные, прочитайте мой пост: t.me/friendlyFrontend/318
@sartjhon3300
@sartjhon3300 11 ай бұрын
только хотел написать об этом. зачем этот велосипед с json.task )
@OlegNaumov-me6yj
@OlegNaumov-me6yj 9 ай бұрын
Странно что вы раньше этого не знали.
@AleksanderLamkov
@AleksanderLamkov 9 ай бұрын
Потому что с VSCode не работал уже года три. Забыл уже что такое «плагин для IDE», в вебшторм всё есть «изкоробки».
@МихаилЛихачёв-ч5ш
@МихаилЛихачёв-ч5ш 8 ай бұрын
@@OlegNaumov-me6yj Здесь ничего удивительного нет! Знаешь ту программу, в которой постоянно работаешь, а работаешь в той проге, которую знаешь. Как-то так.
@nik_user75
@nik_user75 2 ай бұрын
@@AleksanderLamkov современный css может тоже что и Sass (SCSS)
@ivenzo
@ivenzo Ай бұрын
Ох, изучаю фронтенд, и столько всего слышал про SASS SCSS, думал, что такой страшный зверь, а ты так все раскидал, так последовательно. Респект тебе и твоим рукам. Спасибо! 🙂
@alexb.2616
@alexb.2616 11 ай бұрын
Блин, я даже не знаю, что сказать... Саша, это лучший подрок на новый год! Именно то, что нужно прямо сейчас!!! Фронтенд Дед Мороз не носит бороды. И подарки он доставляет не со снегурочкой, с котом из VK. Спасибо тебе большое!
@VitaliAdamsky
@VitaliAdamsky Ай бұрын
Пацан, чёткое видео! Спасибо! Не знаю сколько тебе лет, но с такими молодыми людьми у страны есть будущее!
@aswarriorr
@aswarriorr 8 ай бұрын
Если можно было бы ставить лайк при каждом разом включая это видео ,я бы это делал не задумываясь ! Респект тебе !
@РусланИванов-и5х
@РусланИванов-и5х 11 ай бұрын
Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?
@MsDlovar
@MsDlovar 11 ай бұрын
Спасибо за полезное видео. Хотелось бы мастер класс по верстке с использованием всех этих преимуществ.
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Обязательно будет! В середине января примерно.
@dondiablopablo
@dondiablopablo 10 ай бұрын
Отличное видео, всё по полочкам, всё понятно, вот прям то, что нужно, супер формат! До этого смотрел другие видео на подобную тему и есть чем сравнить.
@Ivanfwit
@Ivanfwit 9 ай бұрын
отличное видео, спасибо! ждем продолжение про scss и другие препроцессоры)
@exacreator
@exacreator 9 ай бұрын
Максимально полезное видео, спасибо большое ❤
@LAMit
@LAMit 2 ай бұрын
Спасибо за урок!
@solula1744
@solula1744 10 ай бұрын
Очень круто, все понятно! Большое спасибо)
@ВиталийЮркин-м7п
@ВиталийЮркин-м7п 8 ай бұрын
Спасибо Огромное! Очень помог. Как раз Live Sass Compiler перестал работать. Полдня искал альтернативу :)
@Rxx-i6m
@Rxx-i6m 2 ай бұрын
Спасибо за хороший урок
@MrJettann
@MrJettann 11 ай бұрын
Привет, видео получилось интересным! Хотел спросить, есть ли какой способ, чтобы в миксинах использовать css переменные, но которые идут с единицами измерения уже, по типу fontsize: 16px, но когда тебе нужна только цифра для математических вычислений? Чтоб не хардкодить значение в самом миксине
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Привет! Вроде как можно поделить условные 16px на 1 и Sass вычислит это в числовое значение 16. @function parseValue($value) { @return $value / 1; }
@kalts_daniil
@kalts_daniil 8 ай бұрын
Отличный гайд! Спасибо огромное!) 1 вопрос: почему ты использовал в файле _variables.scss переменные через :root? До этого ты показывал переменные в scss через $ 🤔 В чем преимущество :root перед $ ? Окей, :root глобальный. Но если подключить в самом верху styles.scss файл с переменными _variables.scss, то их так же можно будет использовать во всех остальных файлах 🤔
@AleksanderLamkov
@AleksanderLamkov 8 ай бұрын
Привет! Спасибо за фидбек :) Отвечаю на оба вопроса: каждый из типов переменных ($ от Sass и var от CSS) служит конкретной цели, Sass-переменные пропадают после компиляции SCSS => CSS и превращаются в обычные значения, а CSS-переменные работают в рантайме (в режиме реального времени при взаимодействии с веб-приложением). В большинстве случаев нам нужно, чтобы переменные работали в рантайме. Sass-переменные я использую только в тех местах, где нативные CSS-переменные не заработают в силу особенностей синтаксиса, например, в диапазонах медиазапросов или же в Sass-миксинах.
@Anatoli-bq1pe
@Anatoli-bq1pe 5 ай бұрын
Благодарю за очень полезный видос!
@axis9934
@axis9934 27 күн бұрын
Тоесть например класс контейнер, можно сделать миксином и просто вызывать его, я правильнно понял, спасибо за ваши уроки!
@AleksanderLamkov
@AleksanderLamkov 27 күн бұрын
Да, но я бы так не стал делать для container. Посмотри мой второй мастер-класс на канале, а именно как там используются Sass-миксины.
@ВиталийДавыдов-э4г
@ВиталийДавыдов-э4г 8 ай бұрын
Я загрузил в vscode плагин Live Sass Compiler без сложностей настройки scss показанного в этом видео, и по видимому всё работает. Достаточно ли того что я сделал или необходимо что то ещё? Спасибо
@AleksanderLamkov
@AleksanderLamkov 8 ай бұрын
Да, достаточно. Я с VSCode не работал уже года три, поэтому на момент записи этого видео не вспомнил про этот плагин. Он действительно всё упрощает.
@ВиталийДавыдов-э4г
@ВиталийДавыдов-э4г 8 ай бұрын
@@AleksanderLamkov Спасибо
@biscvie
@biscvie 8 ай бұрын
Спасибо!
@_SOMEONE_
@_SOMEONE_ 10 ай бұрын
Спасибо огромное!
@АлександрСальников-с2ж
@АлександрСальников-с2ж 3 ай бұрын
Коммент в поддержку
@VL4STEL1N
@VL4STEL1N 10 ай бұрын
Отличные гайды у тебя! Респект )
@alemorohere
@alemorohere 11 ай бұрын
Александр, спасибо за ваш вклад. У меня во время обучения возник вопрос: Как вести записи или заметки во время обучения? Подойдет ли для этого Notion или может у вас есть альтернативные решения?
@alemorohere
@alemorohere 11 ай бұрын
Я самоучка
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Notion отлично подходит, я его использую до сих пор, когда надо что-то зафиксировать и не забыть. У меня там отдельная картотека с тезисами по разным темам собралась :)
@alemorohere
@alemorohere 11 ай бұрын
@@AleksanderLamkov спасибо😉
@yansobol9529
@yansobol9529 11 ай бұрын
@@AleksanderLamkovспасибо за очень полезное видео. А можете сделать видео про Notion и как лучше в нем вести конспекты Заранее спасибо
@ЕленаКонциялова-ю9к
@ЕленаКонциялова-ю9к 4 ай бұрын
Крутой видос, спасибо.)
@АндрейШтольц-л4ю
@АндрейШтольц-л4ю 11 ай бұрын
Как всегда отличный урок! Раскройте, пожалуйста, тему правила @use, особенно в контексте подключения медиа-запросов. Спасибо.
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Привет! Постараюсь в мастер-классе использовать @use для медиазапросов.
@Aluston1783
@Aluston1783 7 ай бұрын
Классный гайд!
@magazila
@magazila 11 ай бұрын
Привет, давно к тебе не заглядывал. закончил смотреть когда еще был хтмл. А сейчас возник вопрос, а можно ли прислать свои проекты (Только хтмл цсс(сцсс) и немного джавы) на проверку и оценку?
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Привет! Менторством сейчас занимаюсь редко, проверять работы нет времени, извини. Может позже запущу формат а-ля "Ревью верстки подписчиков", обязательно сообщу о этом в тг-канале: t.me/friendlyFrontend
@magazila
@magazila 11 ай бұрын
@@AleksanderLamkov Да я подписан на телегу, жду инфу тогда )
@un_defined
@un_defined 6 ай бұрын
спасибо
@ilyashokhov
@ilyashokhov Ай бұрын
Вот бы свежее видео о scss и vue3
@AleksanderLamkov
@AleksanderLamkov Ай бұрын
Увы, Vue совсем не мой стек. А вот про Sass будет скоро ролик, где крутой адаптивный шрифт покажу через миксины и функции Sass.
@evgeniy3370
@evgeniy3370 6 ай бұрын
не сомотрел ещё мастер класс, но интересует вопрос, нужно ли использовать импорты в стилях, я ещё в 22году слышал такое : Это не просто запутывает, но и нарушает независимость блоков. Make sanse ?
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Если не дублировать импорты, проблем не будет. Ну а если посмотреть итоговый css-файл мастер-класса, то там всё будет ок. Но признаю, Sass-импорты - deprecated, стоит заменит их на use. Просто в этом проекте и с import всё работает хорошо.
@erhack_
@erhack_ 5 ай бұрын
ошибка: scss : Имя "scss" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте п равильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + scss styles.scss styles.css + ~~~~ + CategoryInfo : ObjectNotFound: (scss:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
@AleksanderLamkov
@AleksanderLamkov 5 ай бұрын
Нужно в начале команды не "scss" указывать, а "sass". А вообще, если у тебя VSCode, можешь не мучаться с командами и установить плагин Live Sass Compiler поставить. С ним попроще будет.
@diver2048
@diver2048 5 ай бұрын
Отличный урок, лишь пара замечаний. Первое: в VS Code так же есть расширения, автоматизирующие работу с SASS. И второе: амперсанД пишется с Д на конце))
@КраснаяКошка-м5о
@КраснаяКошка-м5о 4 ай бұрын
С 5:20 ничего не получается. Команда в терминале выдает ошибку. Как-то криво установила nodejs
@AleksanderLamkov
@AleksanderLamkov 4 ай бұрын
Напиши чуть подробнее о проблеме нам в чат: t.me/friendlyFrontendChat Там точно помогут разобраться. Ну а навскидку - если у тебя VSCode, попробуй установить плагин Live Sass Compiler, он сам всё будет компилировать и вроде как не нужно будет возиться с установкой NodeJS.
@akylbekbaizakov
@akylbekbaizakov 5 ай бұрын
👍
@IgorIvchenko-l5x
@IgorIvchenko-l5x 9 ай бұрын
Ото ты торохтиш 😂, очень полезное видео, но, как по мне, слишком быстро излагаешь материал, хотелось бы помедленее слегка "я записываю" ))
@ukraine1514
@ukraine1514 6 ай бұрын
Так скорость уменьш🤣 я на 1.5х ставлю.... Все доходчево
@RomanB-od1qn
@RomanB-od1qn 10 ай бұрын
Каким форматировщиком пользуешься для scss?
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
Не совсем понял вопрос. Ты про кодстайл или про преобразование SCSS => CSS?
@RomanB-od1qn
@RomanB-od1qn 10 ай бұрын
@@AleksanderLamkov ,именно про форматировщик типа prettier
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
Я на видео пока не использую, форматирую вручную. Ну а вообще, на рабочих проектах stylelint и prettier.
@riodejaneiro8491
@riodejaneiro8491 5 ай бұрын
а не проще ли использовать команду sass --watch style.scss:style.css в терминале чем устанавливать и настраивать стороннее приложение?
@AleksanderLamkov
@AleksanderLamkov 5 ай бұрын
Проще один раз настроить, чтобы потом запускать одной кнопкой. А ещё лучше - поставить плагин Live Sass Compiler.
@barmalejZ
@barmalejZ 7 ай бұрын
Эх, нет в видосе про использования @media в препроцессорах, есть ли там какие нюансы?
@AleksanderLamkov
@AleksanderLamkov 7 ай бұрын
Привет! Да, надо было упомянуть, что можно вкладывать медиазапросы внутрь селекторов и что можно использовать переменные в качестве параметров медиазапросов. sass-scss.ru/documentation/pravila_i_direktivi/direktiva_media/
@animejapan675
@animejapan675 6 ай бұрын
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
@AleksanderLamkov 6 ай бұрын
Привет! Не находит файл styles.scss. Попробуй для VSCode плагин Live Sass Compiler поставить и работай через него, так проще.
@БілоногОлександр
@БілоногОлександр Ай бұрын
Я так понимаю ты в сасе класы влажуеш в тегы? это фишка саса? или розкажи поподробнее
@AleksanderLamkov
@AleksanderLamkov Ай бұрын
Ранее возможность вкладывать селекторы друг в друга была только при использовании препроцессора стилей, в частности, Sass. Сейчас такая возможность (пусть и урезанная) есть и в чистом CSS, но пока плохо поддерживается браузерами. Ну а в Sass фишка вложенности всегда была, все ею пользуются до сих пор. Вот с этого таймкода рассказываю про эту фишку: kzbin.info/www/bejne/pnO2lJtrdth9jdU
@kaiken9101
@kaiken9101 10 ай бұрын
некоторые вещи уже есть в CSS по умолчанию )
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
Например какие?)
@pazoodelujo983
@pazoodelujo983 5 ай бұрын
У МЕНЯ ПРОБЛЕМА. В момент, когда я запускаю компиляцию, терминал выдаёт такое Error reading styles.scss: no such file or directory. Как я понял, json не может найти мой файл, чтобы преобразовать его, но я не понимаю как это решить. Всё что я смотрел в интернете не помогает, я даже что-то с ruby делал и та же хрень. Возможно нужно стоит как-то явно указать этому слепому где находится styles.scss? но как?
@AleksanderLamkov
@AleksanderLamkov 5 ай бұрын
Попробуй использовать для VSCode плагин Live Sass Compiler.
@PavelChupryna
@PavelChupryna 6 ай бұрын
Может я что то не понял, но это видео не находится ни в одном плейлисте, что усложняет его поиск... Видео по css функциям и переменным тоже не находятся в плейлисте по css.
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Добавил в отдельный плейлист "CSS": CSS kzbin.info/aero/PL0MUAHwery4ojFkcq8PD-6ylUalMGqXfs В текущий (CSS курс) добавить не могу, т. к. тема этого видео не связана с курсом по CSS напрямую. В любом случае, спасибо за информацию!
@НигинаЗарипова-т4ц
@НигинаЗарипова-т4ц 6 ай бұрын
Дошла до этой темы, так сильно плаваю, очень расстраиваюсь, у всех так в начале ? Или это я просто не способная ? 😢😢 спасибо за видео ! 🔥
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Препроцессор стилей - это инструмент автоматизации. Лично я начал его использовать спустя месяца 3 плотной работы с голым CSS. Sass решил мои боли, помог сэкономить время на рутинные задачи. Если вам пока сложно разобраться с этим инструментом, то значит вам пока рано с ним взаимодействовать. Наловчитесь с классическим CSS, познайте все его недостатки, помучайтесь, а затем уже осознанно возвращаетесь к Sass.
@НигинаЗарипова-т4ц
@НигинаЗарипова-т4ц 6 ай бұрын
Спасибо 🙏
@LAMit
@LAMit 2 ай бұрын
У меня тоже так было. Не нужно расстраивать все придет в свое время, просто продолжай заниматься.
@PavelChupryna
@PavelChupryna 5 ай бұрын
Подскажите, видел как кто то копирует классы c html в scss c помошью csstractor, и они у него вставляются с вложенностью, а у меня нет. Как повторить трюк?
@AleksanderLamkov
@AleksanderLamkov 5 ай бұрын
Привет! Попробуй написать о своей проблеме в телеграмм-чат нашего сообщества, скорее всего там тебе помогут: t.me/friendlyFrontendChat
@LAMit
@LAMit 2 ай бұрын
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
@denishaleckiy8303 Ай бұрын
Не понимаю, а если html файлов станет много, они все должны вытягивать стили с общего styles.scss? Почему им просто не брать нужные блоки самим, это же, вроде как, логичнее
@AleksanderLamkov
@AleksanderLamkov Ай бұрын
Такая оптимизация хороша в теории, но на практике так делают редко. Во-первых, браузер не может читать scss-файлы. Только итоговый обработанный препроцессором css-файл. Обработка эта зачастую происходит локально, на этапе разработки, на компьютере фронтенд-разработчика. Во-вторых, нет такого инструмента, который безошибочно проанализирует разметку конкретной страницы и соберет «наверняка минималистичный» единый CSS-файл по SCSS-кусочкам. Проблема в том, что не вся разметка присутствует в html-файле изначально. Какая-то рисуется джаваскриптом. А какая-то вовсе приходит с сервера отдельным запросом и, опять же, рисуется скриптом. Миллион нюансов, которые крайне сложно учесть при анализе страницы. В-третьих, выигрываем в производительности не так много, как кажется. Если стили написаны грамотно, без лишних систематических дублирований наборов правил, то выигрыш при описанном тобою подходе будет несущественным.
@otsv-un2bd
@otsv-un2bd 11 ай бұрын
почему вы такой сложный способ выбрали использования scss для новичков? есть же расширение для vscode которое настраивается и управляется в один клик. а так спасибо за урок, смотрел все
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Live Sass Compiler? Забыл о нем. Не пользовался VSCode уже 2.5 года, всё вылетело из головы.
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Добавил в закреп информацию о расширении.
@otsv-un2bd
@otsv-un2bd 11 ай бұрын
да, Live Sass Compiler
@Dark-Fantasys
@Dark-Fantasys 3 ай бұрын
5:30 у меня винда 11, выдает ошибку при попытке ввести команду: "Имя npm не распознано как имя командлета, функции, файла сценария или выполнения программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка: 1 знак: 1 ..."
@AleksanderLamkov
@AleksanderLamkov 3 ай бұрын
Скинь скриншот ошибки в чат, тебе помогут: t.me/friendlyFrontendChat
@enot_poloskun007
@enot_poloskun007 10 ай бұрын
Хорошее видео, правда автор так быстро говорит, что иногда приходится отматывать, в остальном все супер.
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
Привет! В этом видео впервые за долгое время выпуска контента изменил стиль монтажа, чтобы паузы между предложениями были естественнее и, соответственно, дольше. Жаль, что и этого темпа для комфортного усвоения материала недостаточно :( Буду думать…
@enot_poloskun007
@enot_poloskun007 10 ай бұрын
@@AleksanderLamkov ну это только на мой вкус, материал качественный и полезный, но ощущение будто вы его быстро зачитываете с экрана, нежели в живую все объясняете своими словами. Но есть и плюсы в таком подходе, т.к будь это в более live формате, по времени это было бы в 2-3 раза больше по времени и не каждый бы стал смотреть видео на 30-40 минут. Прошлые видео не смотрел ещё, но глянул плейлист, и приятно удивился, структура с самого начала и все самое нужное. Обязательно посмотрю про html, css и прочее, лишним не будет. Радует, что появляются такие каналы, как бы не было много видео про IT, именно в таком порядке и про все, не так часто можно найти. Мне и другим новичкам это нужно
@ilgizreklama
@ilgizreklama 9 ай бұрын
Наооборот хорошо, что быстро и без воды, а то многих приходиться смотреть на скорости 1,5
@enot_poloskun007
@enot_poloskun007 9 ай бұрын
@@ilgizreklama кому как, это же моё личное мнение, например если бы я не знал 90%+ из этого, то пришлось бы десяток раз отматывать, искать где-то ещё подробное описание, но скорее всего даже смотреть бы не стал, а память освяжить для повторения, тут да, лучше ничего не видел для этого
@asante5979
@asante5979 Ай бұрын
У меня в обычном CSS вложения работают, почему это подают как фишку SCSS?
@AleksanderLamkov
@AleksanderLamkov Ай бұрын
Потому что в CSS эта фишка появилась сравнительно недавно. Да и в CSS она всё же по-другому работает, нежели в Sass.
@asante5979
@asante5979 Ай бұрын
@@AleksanderLamkov А, интересно. А в чем отличия? На первый взгляд реализация 1 в 1
@AleksanderLamkov
@AleksanderLamkov Ай бұрын
Отличия в конкатенации (соединении) имен классов. В Sass можно так: .header { &__button { … } } И это преобразуется в: .header__button { … } А в CSS такой синтаксис: .header { &__button { … } } В принципе будет невалидным.
@asante5979
@asante5979 Ай бұрын
@@AleksanderLamkov А, понял. Просто не считал это частью самого вложения, а скорее форматом записи селектора. Спасибо за ответ!
@ВиталийДавыдов-э4г
@ВиталийДавыдов-э4г 8 ай бұрын
Если проект написан с препроцессором и необходимо залить на хостинг, все ли серверы имею загруженный компелятор scss ? надо ли выяснять этот момнет? куда смотреть в параметрах хостинга? Спасибо.
@AleksanderLamkov
@AleksanderLamkov 8 ай бұрын
На хостинг в любом случае необходимо заливать лишь .css-файлы. Исходники .scss закидывать не стоит. Даже если сервер автоматически будет преобразовать scss => css, то не советую так делать. Лучше на первых этапах обучения этот процесс контролировать самому и преобразовать файлы локально.
@ВиталийДавыдов-э4г
@ВиталийДавыдов-э4г 8 ай бұрын
@@AleksanderLamkov Спасибо Александр
@xMurieLLx
@xMurieLLx 8 ай бұрын
changed 17 packages in 1s 3 packages are looking for funding run `npm fund` for details Вот такой вывод на npm install -g sass и, естественно, никого sass не установилось даже
@AleksanderLamkov
@AleksanderLamkov 8 ай бұрын
Похоже, что у тебя на компьютере ранее уже был установлен Sass.
@xMurieLLx
@xMurieLLx 8 ай бұрын
@@AleksanderLamkov тяк-с.... информация интересная. А как проверить, что был установлен ? И Если необходимо, как удалить и переустановить актуальную версию ? Или, если можно, как обновить, ранее установленную, до актуальной, чтобы можно было адекватно работать без каких-либо костылей ? Хотя бы, где почитать можно про такие действия с системой ?
@AleksanderLamkov
@AleksanderLamkov 8 ай бұрын
Проверить установлен ли пакет и узнать номер его номер версии можно командой: npm -v sass Обновить пакет до последней версии можно командой: npm i -g sass@latest
@AleksanderLamkov
@AleksanderLamkov 8 ай бұрын
Команды npm описаны тут: docs.npmjs.com/cli/v6/commands
@xMurieLLx
@xMurieLLx 8 ай бұрын
​@@AleksanderLamkovОтлично ! Спасибо ! После учёбы посмотрю и почитаю
@xaosland
@xaosland 8 ай бұрын
Хорошее видео, только протараторил ппц
@rocketman4072
@rocketman4072 8 ай бұрын
в ВС коде есть вотчер
@olegkapkaev6911
@olegkapkaev6911 3 ай бұрын
дротота какая-то, вот зачем все это нужно!? ведь в итоге после преобразования получается ровно такой же файл css....
@olegkapkaev6911
@olegkapkaev6911 3 ай бұрын
20:00 - твой результат в виде CSS файла содержит все тот же ДУБЛИРОВАННЫЙ КОД для разных классов CSS, только ты трахался со всеми этими препроцессорами туеву хучу времени чтобы это все было написано ими? :))))) ну круто чо!
@AleksanderLamkov
@AleksanderLamkov 3 ай бұрын
Если не видишь для себя пользы в препроцессоре, то этот инструмент тебе пока не нужен. Миксины, функции, циклы и более удобная вложенность с возможностью конкатенации классов - то, за что препроцессоры стилей используют.
@olegkapkaev6911
@olegkapkaev6911 3 ай бұрын
@@AleksanderLamkov ты не для меня пользу покажи, а пользу для проекта, ведь в CSS файле так и остались ровно те же стили с тем же одинаковым кодом, или ты будешь это оспаривать? там ведь в 2х разных классах повторяются одинаковые строки...
@AleksanderLamkov
@AleksanderLamkov 3 ай бұрын
Давай разделим понятия "польза для конечного пользователя продукта", то есть польза для посетителя сайта и "польза для проекта", то есть польза для разработчиков и владельцев бизнеса. Да, для конечного пользователя ничего не меняется - он как загружал сайт за N секунд, так и продолжит его загружать за то же время. Но вот бизнес, который тебе, как разработчику, платит деньги, получит неоспоримый профит от внедрения препроцессора стилей во фронтенд часть проекта. За счёт внедрения на проекте инструментов автоматизации оптимизируется кодовая база, она становится более понятной для разработчиков (текущих и будущих), то есть непосредственно улучшается DX (Developer Experience). Владельцу бизнеса будет куда проще (читай - де-ше-вле) нанять нового разработчика в продукт, где в одном CSS-файле не хаотичная свалка на 100 тысяч строчек, а где стили всех компонентов разбиты на отдельные SCSS-файлы, где есть система из миксинов и функций, упрощающая работу над продуктом. Надеюсь, я тебя переубедил или, хотя бы, дал новую информацию к размышлению :)
@olegkapkaev6911
@olegkapkaev6911 3 ай бұрын
@@AleksanderLamkov это все понятно, НО в видео - ты четко говоришь о том что "вот в CSS файле повторяется код..." и как бы подразумевается что ты от этого избавишься, чтобы работало и не повторялось! Но по факту - все так и остается.. вот что меня возмутило.... а вовсе не экономия заказчика... кроме того можно банально разбивать огромные CSS файлы на удобные и быстро прогружаемые, в общем оптимизация она разная... и даже бывает для конечного посетителя сайта...
@CanumVenaticorum
@CanumVenaticorum 10 ай бұрын
Чистый CSS "редко используют" только не самые компетентные разработчики)) Потому что актуальный css своими фичами мало чем отличается от препроцессоров. А вот недостатки у последних весьма критичны могут быть.
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
Чистый CSS и его новая мертворожденная фича нестинга не дружит с конкатенацией классов, например, чтобы удобно писать селекторы БЭМ элементов. Так что без процессоров пока сложно.
@CanumVenaticorum
@CanumVenaticorum 10 ай бұрын
@@AleksanderLamkov это самая большая дичь в scss, которую большинство преподносит как "фичу" - привязываться к структуре кода... в чём вообще проблема? много времени уходит на написание классов? ctrl+c ctrl+v)) ещё и медиазапросы распихивают по этим огрызкам, вместо того чтобы собрать всё вместе...
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
Медиазапросы локально расположенные в селекторах то чем не угодили? Удобно ведь. Не нужно один и тот же селектор по разным местам искать.
@CanumVenaticorum
@CanumVenaticorum 10 ай бұрын
@@AleksanderLamkov потому что в начале пишешь стили под десктоп (или наоборот), а потом под мобилу. а именно что не лазишь по всем селекторам с миксинами (или что там). а подход scss подразумевает что пишешь стили для элемента и тут же медиазапрос
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
Твое мнение имеет место быть, но я с тобой не соглашусь, мне удобнее держать медиазапросы локально, чтобы сразу видеть, что происходит с элементом на разных диапазонах экрана.
@carry-on-chaos4032
@carry-on-chaos4032 11 ай бұрын
На мой взгляд миксин flex-center лучше было бы сделать как placeholder.
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Не понял тебя. Что за плейсхолдер?
@carry-on-chaos4032
@carry-on-chaos4032 11 ай бұрын
я имел в виду через extend. Хотя сейчас начал читать доку, там написано что миксины как раз позволяют избегать несемантические классы, как в нашем случае flex-center, так что наверное лучше через миксин, чем через наследование
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Я думаю, что mixin тут будет удобнее extends, так как в него ещё можно прокинуть аргумент, например, для значения свойства display, ведь иногда вместо flex может понадобиться inline-flex.
@carry-on-chaos4032
@carry-on-chaos4032 11 ай бұрын
extends все таки нужны для описания отношений между семантическими классами, а для несемантических правил предлагают использовать миксины.
@carry-on-chaos4032
@carry-on-chaos4032 11 ай бұрын
В том и дело, меня всегда интересовал вопрос, если у миксина нет аргументов, то почему бы не использовать абстрактный класс. Но ответ на этот вопрос в сообщении выше.
@nurzhanovchanel
@nurzhanovchanel 10 ай бұрын
В css уже есть вложеность 😊
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
У неё очень скудная поддержка, ну а конкатенация частей селектора (для того же БЭМа) в принципе невозможна.
@nurzhanovchanel
@nurzhanovchanel 10 ай бұрын
@@AleksanderLamkov почему? Всё браузеры кроме дескоптного Сафари))
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
У десктопного сафари тот же % поддержки, что и у мобильного. Но в целом 81% суммарной поддержки - это мало и я бы не рисковал использовать в проде, пока процент не станет близок к 90. Ну а в проектах с БЭМом нативный нестинг, похоже, нельзя будет заюзать никогда.
@nurzhanovchanel
@nurzhanovchanel 10 ай бұрын
@@AleksanderLamkov я говорю по факту, что поддержки нет только у десктопной версии Сафари. Таблица поддержки отстает и долго обновляется.
@AleksanderLamkov
@AleksanderLamkov 10 ай бұрын
Хм, не знал про отставание актуальности caniuse.
@CRAZY_PUBG600K
@CRAZY_PUBG600K 8 ай бұрын
uzbekstan
@Dark-Fantasys
@Dark-Fantasys 3 ай бұрын
5:17 ты проговорил "Пробел, джи, пробел, сасс", но написал при этом "-g"
@AleksanderLamkov
@AleksanderLamkov 3 ай бұрын
Оговорился) Спасибо, что заметил!
@web__pavlovo
@web__pavlovo 11 ай бұрын
Привет инженер из вк.почему музыку на заблокируемом телефоне нельзя слушать,а видео слушать можно?
@AleksanderLamkov
@AleksanderLamkov 11 ай бұрын
Посовещавшись коллективным разумом с тысячей других разработчиков компании, ответа у меня не появилось :)
@smartcompany11
@smartcompany11 11 ай бұрын
Очевидно что музыка и видео это два разных сервиса)
@web__pavlovo
@web__pavlovo 11 ай бұрын
@@smartcompany11 ны ты просто уммм
@AllFishingRu
@AllFishingRu 8 ай бұрын
С 15 минуты уже непонятно(( Так как идёт повествование, но без наглядного примера. Для новичков сложно получилось 😢
@AleksanderLamkov
@AleksanderLamkov 8 ай бұрын
Наглядный пример смотри в мастер-классе по верстке: kzbin.info/aero/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU
@AllFishingRu
@AllFishingRu 8 ай бұрын
@@AleksanderLamkov благодарю, попробую сверстать
@gabbergabberovich
@gabbergabberovich 6 ай бұрын
Устаревшая технология, которая уже не используется после появления нативных CSS переменных и calc. Так же она не работает при разработке приложений и сайтов на удаленном дев-окружении. Да и по факту от нее больше проблем чем каких-либо осязаемых преимуществ.
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
CSS-переменные поддерживаются всеми браузерами 7 последних лет. Я пришел в разработку 4 года назад. Всю мою карьеру, начиная от маленькой веб-студии, заканчивая текущим местом работы в бигтехе, я пишу стили с использованием препроцессора стилей. Выводы сделайте сами.
@GrafOrdos
@GrafOrdos 7 ай бұрын
на стартовой заглушке "ускрояем"
@AleksanderLamkov
@AleksanderLamkov 7 ай бұрын
Ох. Не заметил, исправлю. Спасибо большое!)
@BohdanTrotsenko
@BohdanTrotsenko 6 ай бұрын
how is it going in ruzzia?
@LLuKKen
@LLuKKen 7 ай бұрын
Такое ощущение, что ты куда то спешишь. У тебя суп варится на плите, или ты во время обеденного перерыва ролики записываешь?
@AleksanderLamkov
@AleksanderLamkov 7 ай бұрын
На ютубе можно выставить увеличенную или уменьшенную скорость воспроизведения. Поставь 0.75, может будет получше.
@Mylovemusic-fl7ob
@Mylovemusic-fl7ob 6 ай бұрын
Чтоб ты понимал братюня... начинающий - это Я, и я использую note pad ++, а про VSCode я узнал недавно от украинского блогера, который к сожалению лучше чем ты понимает состояние новичка/начинающего и умеет действительно по настоящему методично и по полочкам объяснять что к чему, зачем и для чего. Ты же сильно торопишься. Такое впечатление, что твоя задача быстро и бегло выложить материал, а понял тебя кто-то или нет, это уже не твоя проблема, была бы статистика просмотров и комментариев, а там пофиг на остальное. Бесспорно контент интересный но трудноусвояемый ввиду такой специфический подачи материала, я бы сказал не для широкого спектра людей.
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Мой контент на канале с самого его основания идёт последовательно от теме к теме, где я разжевываю всё, от IDE до последних тем по JS на канале. Если зритель ознакомился со всем контентом до этого (включая мастер-класс, вышедший ДО этого гайда по Sass), то ему будет понятно всё из этого видео. Если ты считаешь, что я должен подстраивать каждое свое видео под «абсолютно большинство», то нет, ты не прав. Я делаю так, как хочу, так, как умею, следую своему заранее намеченному плану. Над темпом речи я работаю, но сильно замедлить его вряд ли когда-нибудь получится. Если тебя не устраивает моя подача, не смотри. Я же найду «своего» зрителя. Да и, кажется, уже нашел, судя по статистике роста аудитории.
@evgeniy3370
@evgeniy3370 6 ай бұрын
Это Женя что ли, который фрилансер по жизни ?
@денис-к-а
@денис-к-а 6 ай бұрын
PostCSS - препроцессор? О_О Ну и использовать Sass в 2024... Такое.
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Не препроцессор, а постпроцессор?) Из разряда «реакт не фреймворк». Душно. Ну а про «использовать Sass в 2024-м» вообще не понимаю предъявы. То, что в чистом CSS завезли синтаксис вложенных селекторов, ещё не значит, что весь смысл препроцессоров сводится к нулю.
CSS: svh, lvh, dvh - новые единицы измерения
7:34
Александр Ламков — Friendly Frontend
Рет қаралды 42 М.
How Much Tape To Stop A Lamborghini?
00:15
MrBeast
Рет қаралды 230 МЛН
Farmer narrowly escapes tiger attack
00:20
CTV News
Рет қаралды 10 МЛН
The IMPOSSIBLE Puzzle..
00:55
Stokes Twins
Рет қаралды 179 МЛН
12. CSS Flexbox Layout. Флексы в CSS. Гайд по флексбокс
16:35
Александр Ламков — Friendly Frontend
Рет қаралды 15 М.
БЭМ методология за 10 минут | Основы для начинающих
10:01
Александр Ламков — Friendly Frontend
Рет қаралды 22 М.
Frontend Roadmap 2024 | Что должен учить фронтенд-разработчик в 2024 году
14:35
Александр Ламков — Friendly Frontend
Рет қаралды 75 М.
Explained in 2 minutes: SASS vs. SCSS
1:51
onjsdev
Рет қаралды 6 М.
CSS-модули, SASS/SCSS и сброс стилей в React-приложении
18:28
Михаил Непомнящий
Рет қаралды 37 М.
Лучший Гайд по Kafka для Начинающих За 1 Час
1:15:01
Stop using @import with Sass | @use and @forward explained
13:13
Kevin Powell
Рет қаралды 252 М.