1. Для VSCode оказывается есть расширение Live Sass Compiler: marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass. Можно через него работать с SCSS также удобно, как в WebStorm. 2. Всем, кто задается вопросом, зачем нужны CSS-переменные, если есть Sass-переменные, прочитайте мой пост: t.me/friendlyFrontend/318
@@OlegNaumov-me6yj Здесь ничего удивительного нет! Знаешь ту программу, в которой постоянно работаешь, а работаешь в той проге, которую знаешь. Как-то так.
Блин, я даже не знаю, что сказать... Саша, это лучший подрок на новый год! Именно то, что нужно прямо сейчас!!! Фронтенд Дед Мороз не носит бороды. И подарки он доставляет не со снегурочкой, с котом из VK. Спасибо тебе большое!
Ох, изучаю фронтенд, и столько всего слышал про SASS SCSS, думал, что такой страшный зверь, а ты так все раскидал, так последовательно. Респект тебе и твоим рукам. Спасибо! 🙂
Отличное видео, всё по полочкам, всё понятно, вот прям то, что нужно, супер формат! До этого смотрел другие видео на подобную тему и есть чем сравнить.
Я загрузил в vscode плагин Live Sass Compiler без сложностей настройки scss показанного в этом видео, и по видимому всё работает. Достаточно ли того что я сделал или необходимо что то ещё? Спасибо
Отличный гайд! Спасибо огромное!) 1 вопрос: почему ты использовал в файле _variables.scss переменные через :root? До этого ты показывал переменные в scss через $ 🤔 В чем преимущество :root перед $ ? Окей, :root глобальный. Но если подключить в самом верху styles.scss файл с переменными _variables.scss, то их так же можно будет использовать во всех остальных файлах 🤔
Привет! Спасибо за фидбек :) Отвечаю на оба вопроса: каждый из типов переменных ($ от Sass и var от CSS) служит конкретной цели, Sass-переменные пропадают после компиляции SCSS => CSS и превращаются в обычные значения, а CSS-переменные работают в рантайме (в режиме реального времени при взаимодействии с веб-приложением). В большинстве случаев нам нужно, чтобы переменные работали в рантайме. Sass-переменные я использую только в тех местах, где нативные CSS-переменные не заработают в силу особенностей синтаксиса, например, в диапазонах медиазапросов или же в Sass-миксинах.
Привет, видео получилось интересным! Хотел спросить, есть ли какой способ, чтобы в миксинах использовать css переменные, но которые идут с единицами измерения уже, по типу fontsize: 16px, но когда тебе нужна только цифра для математических вычислений? Чтоб не хардкодить значение в самом миксине
Напиши чуть подробнее о проблеме нам в чат: t.me/friendlyFrontendChat Там точно помогут разобраться. Ну а навскидку - если у тебя VSCode, попробуй установить плагин Live Sass Compiler, он сам всё будет компилировать и вроде как не нужно будет возиться с установкой NodeJS.
Александр, спасибо за ваш вклад. У меня во время обучения возник вопрос: Как вести записи или заметки во время обучения? Подойдет ли для этого Notion или может у вас есть альтернативные решения?
Notion отлично подходит, я его использую до сих пор, когда надо что-то зафиксировать и не забыть. У меня там отдельная картотека с тезисами по разным темам собралась :)
5:30 у меня винда 11, выдает ошибку при попытке ввести команду: "Имя npm не распознано как имя командлета, функции, файла сценария или выполнения программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка: 1 знак: 1 ..."
Привет, давно к тебе не заглядывал. закончил смотреть когда еще был хтмл. А сейчас возник вопрос, а можно ли прислать свои проекты (Только хтмл цсс(сцсс) и немного джавы) на проверку и оценку?
Привет! Менторством сейчас занимаюсь редко, проверять работы нет времени, извини. Может позже запущу формат а-ля "Ревью верстки подписчиков", обязательно сообщу о этом в тг-канале: t.me/friendlyFrontend
не сомотрел ещё мастер класс, но интересует вопрос, нужно ли использовать импорты в стилях, я ещё в 22году слышал такое : Это не просто запутывает, но и нарушает независимость блоков. Make sanse ?
Если не дублировать импорты, проблем не будет. Ну а если посмотреть итоговый css-файл мастер-класса, то там всё будет ок. Но признаю, Sass-импорты - deprecated, стоит заменит их на use. Просто в этом проекте и с import всё работает хорошо.
Именно по процессору Sass у меня одно видео на канале. Ещё немного в этом видео эта тема затрагивается: ruclips.net/video/6l6IJLlSoLo/видео.html И в этом мастер-классе Sass используется: ruclips.net/p/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU И в будущем МК, который выйдет на следующей неделе, тоже стили будем писать с помощью препроцессора стилей.
Привет! Да, надо было упомянуть, что можно вкладывать медиазапросы внутрь селекторов и что можно использовать переменные в качестве параметров медиазапросов. sass-scss.ru/documentation/pravila_i_direktivi/direktiva_media/
Ранее возможность вкладывать селекторы друг в друга была только при использовании препроцессора стилей, в частности, Sass. Сейчас такая возможность (пусть и урезанная) есть и в чистом CSS, но пока плохо поддерживается браузерами. Ну а в Sass фишка вложенности всегда была, все ею пользуются до сих пор. Вот с этого таймкода рассказываю про эту фишку: ruclips.net/video/pBSch5AsJWs/видео.html
У МЕНЯ ПРОБЛЕМА. В момент, когда я запускаю компиляцию, терминал выдаёт такое Error reading styles.scss: no such file or directory. Как я понял, json не может найти мой файл, чтобы преобразовать его, но я не понимаю как это решить. Всё что я смотрел в интернете не помогает, я даже что-то с ruby делал и та же хрень. Возможно нужно стоит как-то явно указать этому слепому где находится styles.scss? но как?
Подскажите, видел как кто то копирует классы c html в scss c помошью csstractor, и они у него вставляются с вложенностью, а у меня нет. Как повторить трюк?
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, нажимаем "вставить". Радуемся жизни!
Препроцессор стилей - это инструмент автоматизации. Лично я начал его использовать спустя месяца 3 плотной работы с голым CSS. Sass решил мои боли, помог сэкономить время на рутинные задачи. Если вам пока сложно разобраться с этим инструментом, то значит вам пока рано с ним взаимодействовать. Наловчитесь с классическим CSS, познайте все его недостатки, помучайтесь, а затем уже осознанно возвращаетесь к Sass.
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. Почему выдает такую ошибку?
Если проект написан с препроцессором и необходимо залить на хостинг, все ли серверы имею загруженный компелятор scss ? надо ли выяснять этот момнет? куда смотреть в параметрах хостинга? Спасибо.
На хостинг в любом случае необходимо заливать лишь .css-файлы. Исходники .scss закидывать не стоит. Даже если сервер автоматически будет преобразовать scss => css, то не советую так делать. Лучше на первых этапах обучения этот процесс контролировать самому и преобразовать файлы локально.
ошибка: scss : Имя "scss" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте п равильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + scss styles.scss styles.css + ~~~~ + CategoryInfo : ObjectNotFound: (scss:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
Нужно в начале команды не "scss" указывать, а "sass". А вообще, если у тебя VSCode, можешь не мучаться с командами и установить плагин Live Sass Compiler поставить. С ним попроще будет.
Не понимаю, а если html файлов станет много, они все должны вытягивать стили с общего styles.scss? Почему им просто не брать нужные блоки самим, это же, вроде как, логичнее
Такая оптимизация хороша в теории, но на практике так делают редко. Во-первых, браузер не может читать scss-файлы. Только итоговый обработанный препроцессором css-файл. Обработка эта зачастую происходит локально, на этапе разработки, на компьютере фронтенд-разработчика. Во-вторых, нет такого инструмента, который безошибочно проанализирует разметку конкретной страницы и соберет «наверняка минималистичный» единый CSS-файл по SCSS-кусочкам. Проблема в том, что не вся разметка присутствует в html-файле изначально. Какая-то рисуется джаваскриптом. А какая-то вовсе приходит с сервера отдельным запросом и, опять же, рисуется скриптом. Миллион нюансов, которые крайне сложно учесть при анализе страницы. В-третьих, выигрываем в производительности не так много, как кажется. Если стили написаны грамотно, без лишних систематических дублирований наборов правил, то выигрыш при описанном тобою подходе будет несущественным.
Отличный урок, лишь пара замечаний. Первое: в VS Code так же есть расширения, автоматизирующие работу с SASS. И второе: амперсанД пишется с Д на конце))
Может я что то не понял, но это видео не находится ни в одном плейлисте, что усложняет его поиск... Видео по css функциям и переменным тоже не находятся в плейлисте по css.
Добавил в отдельный плейлист "CSS": CSS ruclips.net/p/PL0MUAHwery4ojFkcq8PD-6ylUalMGqXfs В текущий (CSS курс) добавить не могу, т. к. тема этого видео не связана с курсом по CSS напрямую. В любом случае, спасибо за информацию!
Отличия в конкатенации (соединении) имен классов. В Sass можно так: .header { &__button { … } } И это преобразуется в: .header__button { … } А в CSS такой синтаксис: .header { &__button { … } } В принципе будет невалидным.
почему вы такой сложный способ выбрали использования scss для новичков? есть же расширение для vscode которое настраивается и управляется в один клик. а так спасибо за урок, смотрел все
Привет! В этом видео впервые за долгое время выпуска контента изменил стиль монтажа, чтобы паузы между предложениями были естественнее и, соответственно, дольше. Жаль, что и этого темпа для комфортного усвоения материала недостаточно :( Буду думать…
@@AleksanderLamkov ну это только на мой вкус, материал качественный и полезный, но ощущение будто вы его быстро зачитываете с экрана, нежели в живую все объясняете своими словами. Но есть и плюсы в таком подходе, т.к будь это в более live формате, по времени это было бы в 2-3 раза больше по времени и не каждый бы стал смотреть видео на 30-40 минут. Прошлые видео не смотрел ещё, но глянул плейлист, и приятно удивился, структура с самого начала и все самое нужное. Обязательно посмотрю про html, css и прочее, лишним не будет. Радует, что появляются такие каналы, как бы не было много видео про IT, именно в таком порядке и про все, не так часто можно найти. Мне и другим новичкам это нужно
@@ilgizreklama кому как, это же моё личное мнение, например если бы я не знал 90%+ из этого, то пришлось бы десяток раз отматывать, искать где-то ещё подробное описание, но скорее всего даже смотреть бы не стал, а память освяжить для повторения, тут да, лучше ничего не видел для этого
20:00 - твой результат в виде CSS файла содержит все тот же ДУБЛИРОВАННЫЙ КОД для разных классов CSS, только ты трахался со всеми этими препроцессорами туеву хучу времени чтобы это все было написано ими? :))))) ну круто чо!
Если не видишь для себя пользы в препроцессоре, то этот инструмент тебе пока не нужен. Миксины, функции, циклы и более удобная вложенность с возможностью конкатенации классов - то, за что препроцессоры стилей используют.
@@AleksanderLamkov ты не для меня пользу покажи, а пользу для проекта, ведь в CSS файле так и остались ровно те же стили с тем же одинаковым кодом, или ты будешь это оспаривать? там ведь в 2х разных классах повторяются одинаковые строки...
Давай разделим понятия "польза для конечного пользователя продукта", то есть польза для посетителя сайта и "польза для проекта", то есть польза для разработчиков и владельцев бизнеса. Да, для конечного пользователя ничего не меняется - он как загружал сайт за N секунд, так и продолжит его загружать за то же время. Но вот бизнес, который тебе, как разработчику, платит деньги, получит неоспоримый профит от внедрения препроцессора стилей во фронтенд часть проекта. За счёт внедрения на проекте инструментов автоматизации оптимизируется кодовая база, она становится более понятной для разработчиков (текущих и будущих), то есть непосредственно улучшается DX (Developer Experience). Владельцу бизнеса будет куда проще (читай - де-ше-вле) нанять нового разработчика в продукт, где в одном CSS-файле не хаотичная свалка на 100 тысяч строчек, а где стили всех компонентов разбиты на отдельные SCSS-файлы, где есть система из миксинов и функций, упрощающая работу над продуктом. Надеюсь, я тебя переубедил или, хотя бы, дал новую информацию к размышлению :)
@@AleksanderLamkov это все понятно, НО в видео - ты четко говоришь о том что "вот в CSS файле повторяется код..." и как бы подразумевается что ты от этого избавишься, чтобы работало и не повторялось! Но по факту - все так и остается.. вот что меня возмутило.... а вовсе не экономия заказчика... кроме того можно банально разбивать огромные CSS файлы на удобные и быстро прогружаемые, в общем оптимизация она разная... и даже бывает для конечного посетителя сайта...
changed 17 packages in 1s 3 packages are looking for funding run `npm fund` for details Вот такой вывод на npm install -g sass и, естественно, никого sass не установилось даже
@@AleksanderLamkov тяк-с.... информация интересная. А как проверить, что был установлен ? И Если необходимо, как удалить и переустановить актуальную версию ? Или, если можно, как обновить, ранее установленную, до актуальной, чтобы можно было адекватно работать без каких-либо костылей ? Хотя бы, где почитать можно про такие действия с системой ?
Проверить установлен ли пакет и узнать номер его номер версии можно командой: npm -v sass Обновить пакет до последней версии можно командой: npm i -g sass@latest
У десктопного сафари тот же % поддержки, что и у мобильного. Но в целом 81% суммарной поддержки - это мало и я бы не рисковал использовать в проде, пока процент не станет близок к 90. Ну а в проектах с БЭМом нативный нестинг, похоже, нельзя будет заюзать никогда.
Чистый CSS "редко используют" только не самые компетентные разработчики)) Потому что актуальный css своими фичами мало чем отличается от препроцессоров. А вот недостатки у последних весьма критичны могут быть.
Чистый CSS и его новая мертворожденная фича нестинга не дружит с конкатенацией классов, например, чтобы удобно писать селекторы БЭМ элементов. Так что без процессоров пока сложно.
@@AleksanderLamkov это самая большая дичь в scss, которую большинство преподносит как "фичу" - привязываться к структуре кода... в чём вообще проблема? много времени уходит на написание классов? ctrl+c ctrl+v)) ещё и медиазапросы распихивают по этим огрызкам, вместо того чтобы собрать всё вместе...
@@AleksanderLamkov потому что в начале пишешь стили под десктоп (или наоборот), а потом под мобилу. а именно что не лазишь по всем селекторам с миксинами (или что там). а подход scss подразумевает что пишешь стили для элемента и тут же медиазапрос
Твое мнение имеет место быть, но я с тобой не соглашусь, мне удобнее держать медиазапросы локально, чтобы сразу видеть, что происходит с элементом на разных диапазонах экрана.
я имел в виду через extend. Хотя сейчас начал читать доку, там написано что миксины как раз позволяют избегать несемантические классы, как в нашем случае flex-center, так что наверное лучше через миксин, чем через наследование
Я думаю, что mixin тут будет удобнее extends, так как в него ещё можно прокинуть аргумент, например, для значения свойства display, ведь иногда вместо flex может понадобиться inline-flex.
В том и дело, меня всегда интересовал вопрос, если у миксина нет аргументов, то почему бы не использовать абстрактный класс. Но ответ на этот вопрос в сообщении выше.
Устаревшая технология, которая уже не используется после появления нативных CSS переменных и calc. Так же она не работает при разработке приложений и сайтов на удаленном дев-окружении. Да и по факту от нее больше проблем чем каких-либо осязаемых преимуществ.
CSS-переменные поддерживаются всеми браузерами 7 последних лет. Я пришел в разработку 4 года назад. Всю мою карьеру, начиная от маленькой веб-студии, заканчивая текущим местом работы в бигтехе, я пишу стили с использованием препроцессора стилей. Выводы сделайте сами.
Чтоб ты понимал братюня... начинающий - это Я, и я использую note pad ++, а про VSCode я узнал недавно от украинского блогера, который к сожалению лучше чем ты понимает состояние новичка/начинающего и умеет действительно по настоящему методично и по полочкам объяснять что к чему, зачем и для чего. Ты же сильно торопишься. Такое впечатление, что твоя задача быстро и бегло выложить материал, а понял тебя кто-то или нет, это уже не твоя проблема, была бы статистика просмотров и комментариев, а там пофиг на остальное. Бесспорно контент интересный но трудноусвояемый ввиду такой специфический подачи материала, я бы сказал не для широкого спектра людей.
Мой контент на канале с самого его основания идёт последовательно от теме к теме, где я разжевываю всё, от IDE до последних тем по JS на канале. Если зритель ознакомился со всем контентом до этого (включая мастер-класс, вышедший ДО этого гайда по Sass), то ему будет понятно всё из этого видео. Если ты считаешь, что я должен подстраивать каждое свое видео под «абсолютно большинство», то нет, ты не прав. Я делаю так, как хочу, так, как умею, следую своему заранее намеченному плану. Над темпом речи я работаю, но сильно замедлить его вряд ли когда-нибудь получится. Если тебя не устраивает моя подача, не смотри. Я же найду «своего» зрителя. Да и, кажется, уже нашел, судя по статистике роста аудитории.
Не препроцессор, а постпроцессор?) Из разряда «реакт не фреймворк». Душно. Ну а про «использовать Sass в 2024-м» вообще не понимаю предъявы. То, что в чистом CSS завезли синтаксис вложенных селекторов, ещё не значит, что весь смысл препроцессоров сводится к нулю.
1. Для VSCode оказывается есть расширение Live Sass Compiler: marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass. Можно через него работать с SCSS также удобно, как в WebStorm.
2. Всем, кто задается вопросом, зачем нужны CSS-переменные, если есть Sass-переменные, прочитайте мой пост: t.me/friendlyFrontend/318
только хотел написать об этом. зачем этот велосипед с json.task )
Странно что вы раньше этого не знали.
Потому что с VSCode не работал уже года три. Забыл уже что такое «плагин для IDE», в вебшторм всё есть «изкоробки».
@@OlegNaumov-me6yj Здесь ничего удивительного нет! Знаешь ту программу, в которой постоянно работаешь, а работаешь в той проге, которую знаешь. Как-то так.
@@AleksanderLamkov современный css может тоже что и Sass (SCSS)
Блин, я даже не знаю, что сказать...
Саша, это лучший подрок на новый год! Именно то, что нужно прямо сейчас!!!
Фронтенд Дед Мороз не носит бороды. И подарки он доставляет не со снегурочкой, с котом из VK.
Спасибо тебе большое!
Ох, изучаю фронтенд, и столько всего слышал про SASS SCSS, думал, что такой страшный зверь, а ты так все раскидал, так последовательно. Респект тебе и твоим рукам. Спасибо! 🙂
Если можно было бы ставить лайк при каждом разом включая это видео ,я бы это делал не задумываясь ! Респект тебе !
Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?
Спасибо за полезное видео. Хотелось бы мастер класс по верстке с использованием всех этих преимуществ.
Обязательно будет! В середине января примерно.
Пацан, чёткое видео! Спасибо! Не знаю сколько тебе лет, но с такими молодыми людьми у страны есть будущее!
Отличное видео, всё по полочкам, всё понятно, вот прям то, что нужно, супер формат!
До этого смотрел другие видео на подобную тему и есть чем сравнить.
отличное видео, спасибо! ждем продолжение про scss и другие препроцессоры)
Максимально полезное видео, спасибо большое ❤
Очень круто, все понятно! Большое спасибо)
Отличный гайд. Спасибо
Спасибо за урок!
Благодарю за очень полезный видос!
Спасибо Огромное! Очень помог. Как раз Live Sass Compiler перестал работать. Полдня искал альтернативу :)
Отличные гайды у тебя! Респект )
Спасибо за хороший урок
Я загрузил в vscode плагин Live Sass Compiler без сложностей настройки scss показанного в этом видео, и по видимому всё работает. Достаточно ли того что я сделал или необходимо что то ещё? Спасибо
Да, достаточно. Я с VSCode не работал уже года три, поэтому на момент записи этого видео не вспомнил про этот плагин. Он действительно всё упрощает.
@@AleksanderLamkov Спасибо
Отличный гайд! Спасибо огромное!)
1 вопрос: почему ты использовал в файле _variables.scss переменные через :root? До этого ты показывал переменные в scss через $ 🤔
В чем преимущество :root перед $ ? Окей, :root глобальный. Но если подключить в самом верху styles.scss файл с переменными _variables.scss, то их так же можно будет использовать во всех остальных файлах 🤔
Привет! Спасибо за фидбек :)
Отвечаю на оба вопроса: каждый из типов переменных ($ от Sass и var от CSS) служит конкретной цели, Sass-переменные пропадают после компиляции SCSS => CSS и превращаются в обычные значения, а CSS-переменные работают в рантайме (в режиме реального времени при взаимодействии с веб-приложением). В большинстве случаев нам нужно, чтобы переменные работали в рантайме. Sass-переменные я использую только в тех местах, где нативные CSS-переменные не заработают в силу особенностей синтаксиса, например, в диапазонах медиазапросов или же в Sass-миксинах.
Привет, видео получилось интересным! Хотел спросить, есть ли какой способ, чтобы в миксинах использовать css переменные, но которые идут с единицами измерения уже, по типу fontsize: 16px, но когда тебе нужна только цифра для математических вычислений? Чтоб не хардкодить значение в самом миксине
Привет! Вроде как можно поделить условные 16px на 1 и Sass вычислит это в числовое значение 16.
@function parseValue($value) {
@return $value / 1;
}
Крутой видос, спасибо.)
С 5:20 ничего не получается. Команда в терминале выдает ошибку. Как-то криво установила nodejs
Напиши чуть подробнее о проблеме нам в чат:
t.me/friendlyFrontendChat
Там точно помогут разобраться.
Ну а навскидку - если у тебя VSCode, попробуй установить плагин Live Sass Compiler, он сам всё будет компилировать и вроде как не нужно будет возиться с установкой NodeJS.
Как всегда отличный урок! Раскройте, пожалуйста, тему правила @use, особенно в контексте подключения медиа-запросов. Спасибо.
Привет! Постараюсь в мастер-классе использовать @use для медиазапросов.
Александр, спасибо за ваш вклад. У меня во время обучения возник вопрос: Как вести записи или заметки во время обучения? Подойдет ли для этого Notion или может у вас есть альтернативные решения?
Я самоучка
Notion отлично подходит, я его использую до сих пор, когда надо что-то зафиксировать и не забыть. У меня там отдельная картотека с тезисами по разным темам собралась :)
@@AleksanderLamkov спасибо😉
@@AleksanderLamkovспасибо за очень полезное видео. А можете сделать видео про Notion и как лучше в нем вести конспекты
Заранее спасибо
Классный гайд!
Спасибо огромное!
5:30 у меня винда 11, выдает ошибку при попытке ввести команду: "Имя npm не распознано как имя командлета, функции, файла сценария или выполнения программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку.
строка: 1 знак: 1 ..."
Скинь скриншот ошибки в чат, тебе помогут:
t.me/friendlyFrontendChat
Спасибо!
Тоесть например класс контейнер, можно сделать миксином и просто вызывать его, я правильнно понял, спасибо за ваши уроки!
Да, но я бы так не стал делать для container. Посмотри мой второй мастер-класс на канале, а именно как там используются Sass-миксины.
Привет, давно к тебе не заглядывал. закончил смотреть когда еще был хтмл. А сейчас возник вопрос, а можно ли прислать свои проекты (Только хтмл цсс(сцсс) и немного джавы) на проверку и оценку?
Привет! Менторством сейчас занимаюсь редко, проверять работы нет времени, извини. Может позже запущу формат а-ля "Ревью верстки подписчиков", обязательно сообщу о этом в тг-канале: t.me/friendlyFrontend
@@AleksanderLamkov Да я подписан на телегу, жду инфу тогда )
Коммент в поддержку
Вот бы свежее видео о scss и vue3
Увы, Vue совсем не мой стек. А вот про Sass будет скоро ролик, где крутой адаптивный шрифт покажу через миксины и функции Sass.
Ото ты торохтиш 😂, очень полезное видео, но, как по мне, слишком быстро излагаешь материал, хотелось бы помедленее слегка "я записываю" ))
Так скорость уменьш🤣 я на 1.5х ставлю.... Все доходчево
не сомотрел ещё мастер класс, но интересует вопрос, нужно ли использовать импорты в стилях, я ещё в 22году слышал такое : Это не просто запутывает, но и нарушает независимость блоков. Make sanse ?
Если не дублировать импорты, проблем не будет.
Ну а если посмотреть итоговый css-файл мастер-класса, то там всё будет ок.
Но признаю, Sass-импорты - deprecated, стоит заменит их на use. Просто в этом проекте и с import всё работает хорошо.
Это весь курс SCSS больше не будет видео по нему?
Именно по процессору Sass у меня одно видео на канале.
Ещё немного в этом видео эта тема затрагивается:
ruclips.net/video/6l6IJLlSoLo/видео.html
И в этом мастер-классе Sass используется:
ruclips.net/p/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU
И в будущем МК, который выйдет на следующей неделе, тоже стили будем писать с помощью препроцессора стилей.
Сейчас @import не работает в сасс, как импортировать миксины и переменные с функциями не понятно
Через use и forward. Покажу в следующем мастер-классе, который выйдет 20-го декабря (в следующую пятницу).
Эх, нет в видосе про использования @media в препроцессорах, есть ли там какие нюансы?
Привет! Да, надо было упомянуть, что можно вкладывать медиазапросы внутрь селекторов и что можно использовать переменные в качестве параметров медиазапросов.
sass-scss.ru/documentation/pravila_i_direktivi/direktiva_media/
Я так понимаю ты в сасе класы влажуеш в тегы? это фишка саса? или розкажи поподробнее
Ранее возможность вкладывать селекторы друг в друга была только при использовании препроцессора стилей, в частности, Sass.
Сейчас такая возможность (пусть и урезанная) есть и в чистом CSS, но пока плохо поддерживается браузерами.
Ну а в Sass фишка вложенности всегда была, все ею пользуются до сих пор.
Вот с этого таймкода рассказываю про эту фишку:
ruclips.net/video/pBSch5AsJWs/видео.html
а не проще ли использовать команду sass --watch style.scss:style.css в терминале чем устанавливать и настраивать стороннее приложение?
Проще один раз настроить, чтобы потом запускать одной кнопкой. А ещё лучше - поставить плагин Live Sass Compiler.
У МЕНЯ ПРОБЛЕМА. В момент, когда я запускаю компиляцию, терминал выдаёт такое Error reading styles.scss: no such file or directory.
Как я понял, json не может найти мой файл, чтобы преобразовать его, но я не понимаю как это решить. Всё что я смотрел в интернете не помогает, я даже что-то с ruby делал и та же хрень. Возможно нужно стоит как-то явно указать этому слепому где находится styles.scss? но как?
Попробуй использовать для VSCode плагин Live Sass Compiler.
Подскажите, видел как кто то копирует классы c html в scss c помошью csstractor, и они у него вставляются с вложенностью, а у меня нет. Как повторить трюк?
Привет! Попробуй написать о своей проблеме в телеграмм-чат нашего сообщества, скорее всего там тебе помогут:
t.me/friendlyFrontendChat
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, нажимаем "вставить".
Радуемся жизни!
Дошла до этой темы, так сильно плаваю, очень расстраиваюсь, у всех так в начале ? Или это я просто не способная ?
😢😢
спасибо за видео ! 🔥
Препроцессор стилей - это инструмент автоматизации.
Лично я начал его использовать спустя месяца 3 плотной работы с голым CSS.
Sass решил мои боли, помог сэкономить время на рутинные задачи.
Если вам пока сложно разобраться с этим инструментом, то значит вам пока рано с ним взаимодействовать.
Наловчитесь с классическим CSS, познайте все его недостатки, помучайтесь, а затем уже осознанно возвращаетесь к Sass.
Спасибо 🙏
У меня тоже так было. Не нужно расстраивать все придет в свое время, просто продолжай заниматься.
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.
Почему выдает такую ошибку?
Привет! Не находит файл styles.scss. Попробуй для VSCode плагин Live Sass Compiler поставить и работай через него, так проще.
Если проект написан с препроцессором и необходимо залить на хостинг, все ли серверы имею загруженный компелятор scss ? надо ли выяснять этот момнет? куда смотреть в параметрах хостинга? Спасибо.
На хостинг в любом случае необходимо заливать лишь .css-файлы. Исходники .scss закидывать не стоит. Даже если сервер автоматически будет преобразовать scss => css, то не советую так делать. Лучше на первых этапах обучения этот процесс контролировать самому и преобразовать файлы локально.
@@AleksanderLamkov Спасибо Александр
спасибо
Каким форматировщиком пользуешься для scss?
Не совсем понял вопрос. Ты про кодстайл или про преобразование SCSS => CSS?
@@AleksanderLamkov ,именно про форматировщик типа prettier
Я на видео пока не использую, форматирую вручную. Ну а вообще, на рабочих проектах stylelint и prettier.
ошибка:
scss : Имя "scss" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте п
равильность написания имени, а также наличие и правильность пути, после чего повторите попытку.
строка:1 знак:1
+ scss styles.scss styles.css
+ ~~~~
+ CategoryInfo : ObjectNotFound: (scss:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Нужно в начале команды не "scss" указывать, а "sass".
А вообще, если у тебя VSCode, можешь не мучаться с командами и установить плагин Live Sass Compiler поставить. С ним попроще будет.
Не понимаю, а если html файлов станет много, они все должны вытягивать стили с общего styles.scss? Почему им просто не брать нужные блоки самим, это же, вроде как, логичнее
Такая оптимизация хороша в теории, но на практике так делают редко.
Во-первых, браузер не может читать scss-файлы. Только итоговый обработанный препроцессором css-файл. Обработка эта зачастую происходит локально, на этапе разработки, на компьютере фронтенд-разработчика.
Во-вторых, нет такого инструмента, который безошибочно проанализирует разметку конкретной страницы и соберет «наверняка минималистичный» единый CSS-файл по SCSS-кусочкам. Проблема в том, что не вся разметка присутствует в html-файле изначально. Какая-то рисуется джаваскриптом. А какая-то вовсе приходит с сервера отдельным запросом и, опять же, рисуется скриптом. Миллион нюансов, которые крайне сложно учесть при анализе страницы.
В-третьих, выигрываем в производительности не так много, как кажется. Если стили написаны грамотно, без лишних систематических дублирований наборов правил, то выигрыш при описанном тобою подходе будет несущественным.
некоторые вещи уже есть в CSS по умолчанию )
Например какие?)
Отличный урок, лишь пара замечаний. Первое: в VS Code так же есть расширения, автоматизирующие работу с SASS. И второе: амперсанД пишется с Д на конце))
Может я что то не понял, но это видео не находится ни в одном плейлисте, что усложняет его поиск... Видео по css функциям и переменным тоже не находятся в плейлисте по css.
Добавил в отдельный плейлист "CSS":
CSS
ruclips.net/p/PL0MUAHwery4ojFkcq8PD-6ylUalMGqXfs
В текущий (CSS курс) добавить не могу, т. к. тема этого видео не связана с курсом по CSS напрямую.
В любом случае, спасибо за информацию!
👍
У меня в обычном CSS вложения работают, почему это подают как фишку SCSS?
Потому что в CSS эта фишка появилась сравнительно недавно. Да и в CSS она всё же по-другому работает, нежели в Sass.
@@AleksanderLamkov А, интересно. А в чем отличия? На первый взгляд реализация 1 в 1
Отличия в конкатенации (соединении) имен классов.
В Sass можно так:
.header {
&__button { … }
}
И это преобразуется в:
.header__button { … }
А в CSS такой синтаксис:
.header {
&__button { … }
}
В принципе будет невалидным.
@@AleksanderLamkov А, понял. Просто не считал это частью самого вложения, а скорее форматом записи селектора. Спасибо за ответ!
почему вы такой сложный способ выбрали использования scss для новичков? есть же расширение для vscode которое настраивается и управляется в один клик. а так спасибо за урок, смотрел все
Live Sass Compiler? Забыл о нем. Не пользовался VSCode уже 2.5 года, всё вылетело из головы.
Добавил в закреп информацию о расширении.
да, Live Sass Compiler
Хорошее видео, правда автор так быстро говорит, что иногда приходится отматывать, в остальном все супер.
Привет! В этом видео впервые за долгое время выпуска контента изменил стиль монтажа, чтобы паузы между предложениями были естественнее и, соответственно, дольше. Жаль, что и этого темпа для комфортного усвоения материала недостаточно :( Буду думать…
@@AleksanderLamkov ну это только на мой вкус, материал качественный и полезный, но ощущение будто вы его быстро зачитываете с экрана, нежели в живую все объясняете своими словами. Но есть и плюсы в таком подходе, т.к будь это в более live формате, по времени это было бы в 2-3 раза больше по времени и не каждый бы стал смотреть видео на 30-40 минут. Прошлые видео не смотрел ещё, но глянул плейлист, и приятно удивился, структура с самого начала и все самое нужное. Обязательно посмотрю про html, css и прочее, лишним не будет. Радует, что появляются такие каналы, как бы не было много видео про IT, именно в таком порядке и про все, не так часто можно найти. Мне и другим новичкам это нужно
Наооборот хорошо, что быстро и без воды, а то многих приходиться смотреть на скорости 1,5
@@ilgizreklama кому как, это же моё личное мнение, например если бы я не знал 90%+ из этого, то пришлось бы десяток раз отматывать, искать где-то ещё подробное описание, но скорее всего даже смотреть бы не стал, а память освяжить для повторения, тут да, лучше ничего не видел для этого
5:17 ты проговорил "Пробел, джи, пробел, сасс", но написал при этом "-g"
Оговорился) Спасибо, что заметил!
дротота какая-то, вот зачем все это нужно!? ведь в итоге после преобразования получается ровно такой же файл css....
20:00 - твой результат в виде CSS файла содержит все тот же ДУБЛИРОВАННЫЙ КОД для разных классов CSS, только ты трахался со всеми этими препроцессорами туеву хучу времени чтобы это все было написано ими? :))))) ну круто чо!
Если не видишь для себя пользы в препроцессоре, то этот инструмент тебе пока не нужен.
Миксины, функции, циклы и более удобная вложенность с возможностью конкатенации классов - то, за что препроцессоры стилей используют.
@@AleksanderLamkov ты не для меня пользу покажи, а пользу для проекта, ведь в CSS файле так и остались ровно те же стили с тем же одинаковым кодом, или ты будешь это оспаривать? там ведь в 2х разных классах повторяются одинаковые строки...
Давай разделим понятия "польза для конечного пользователя продукта", то есть польза для посетителя сайта и "польза для проекта", то есть польза для разработчиков и владельцев бизнеса.
Да, для конечного пользователя ничего не меняется - он как загружал сайт за N секунд, так и продолжит его загружать за то же время.
Но вот бизнес, который тебе, как разработчику, платит деньги, получит неоспоримый профит от внедрения препроцессора стилей во фронтенд часть проекта.
За счёт внедрения на проекте инструментов автоматизации оптимизируется кодовая база, она становится более понятной для разработчиков (текущих и будущих), то есть непосредственно улучшается DX (Developer Experience).
Владельцу бизнеса будет куда проще (читай - де-ше-вле) нанять нового разработчика в продукт, где в одном CSS-файле не хаотичная свалка на 100 тысяч строчек, а где стили всех компонентов разбиты на отдельные SCSS-файлы, где есть система из миксинов и функций, упрощающая работу над продуктом.
Надеюсь, я тебя переубедил или, хотя бы, дал новую информацию к размышлению :)
@@AleksanderLamkov это все понятно, НО в видео - ты четко говоришь о том что "вот в CSS файле повторяется код..." и как бы подразумевается что ты от этого избавишься, чтобы работало и не повторялось! Но по факту - все так и остается.. вот что меня возмутило.... а вовсе не экономия заказчика... кроме того можно банально разбивать огромные CSS файлы на удобные и быстро прогружаемые, в общем оптимизация она разная... и даже бывает для конечного посетителя сайта...
changed 17 packages in 1s
3 packages are looking for funding
run `npm fund` for details
Вот такой вывод на npm install -g sass
и, естественно, никого sass не установилось даже
Похоже, что у тебя на компьютере ранее уже был установлен Sass.
@@AleksanderLamkov
тяк-с.... информация интересная.
А как проверить, что был установлен ? И Если необходимо, как удалить и переустановить актуальную версию ? Или, если можно, как обновить, ранее установленную, до актуальной, чтобы можно было адекватно работать без каких-либо костылей ?
Хотя бы, где почитать можно про такие действия с системой ?
Проверить установлен ли пакет и узнать номер его номер версии можно командой:
npm -v sass
Обновить пакет до последней версии можно командой:
npm i -g sass@latest
Команды npm описаны тут:
docs.npmjs.com/cli/v6/commands
@@AleksanderLamkovОтлично !
Спасибо ! После учёбы посмотрю и почитаю
Привет инженер из вк.почему музыку на заблокируемом телефоне нельзя слушать,а видео слушать можно?
Посовещавшись коллективным разумом с тысячей других разработчиков компании, ответа у меня не появилось :)
Очевидно что музыка и видео это два разных сервиса)
@@smartcompany11 ны ты просто уммм
В css уже есть вложеность 😊
У неё очень скудная поддержка, ну а конкатенация частей селектора (для того же БЭМа) в принципе невозможна.
@@AleksanderLamkov почему? Всё браузеры кроме дескоптного Сафари))
У десктопного сафари тот же % поддержки, что и у мобильного.
Но в целом 81% суммарной поддержки - это мало и я бы не рисковал использовать в проде, пока процент не станет близок к 90.
Ну а в проектах с БЭМом нативный нестинг, похоже, нельзя будет заюзать никогда.
@@AleksanderLamkov я говорю по факту, что поддержки нет только у десктопной версии Сафари. Таблица поддержки отстает и долго обновляется.
Хм, не знал про отставание актуальности caniuse.
в ВС коде есть вотчер
Хорошее видео, только протараторил ппц
Чистый CSS "редко используют" только не самые компетентные разработчики)) Потому что актуальный css своими фичами мало чем отличается от препроцессоров. А вот недостатки у последних весьма критичны могут быть.
Чистый CSS и его новая мертворожденная фича нестинга не дружит с конкатенацией классов, например, чтобы удобно писать селекторы БЭМ элементов.
Так что без процессоров пока сложно.
@@AleksanderLamkov это самая большая дичь в scss, которую большинство преподносит как "фичу" - привязываться к структуре кода... в чём вообще проблема? много времени уходит на написание классов? ctrl+c ctrl+v)) ещё и медиазапросы распихивают по этим огрызкам, вместо того чтобы собрать всё вместе...
Медиазапросы локально расположенные в селекторах то чем не угодили? Удобно ведь. Не нужно один и тот же селектор по разным местам искать.
@@AleksanderLamkov потому что в начале пишешь стили под десктоп (или наоборот), а потом под мобилу. а именно что не лазишь по всем селекторам с миксинами (или что там). а подход scss подразумевает что пишешь стили для элемента и тут же медиазапрос
Твое мнение имеет место быть, но я с тобой не соглашусь, мне удобнее держать медиазапросы локально, чтобы сразу видеть, что происходит с элементом на разных диапазонах экрана.
На мой взгляд миксин flex-center лучше было бы сделать как placeholder.
Не понял тебя. Что за плейсхолдер?
я имел в виду через extend. Хотя сейчас начал читать доку, там написано что миксины как раз позволяют избегать несемантические классы, как в нашем случае flex-center, так что наверное лучше через миксин, чем через наследование
Я думаю, что mixin тут будет удобнее extends, так как в него ещё можно прокинуть аргумент, например, для значения свойства display, ведь иногда вместо flex может понадобиться inline-flex.
extends все таки нужны для описания отношений между семантическими классами, а для несемантических правил предлагают использовать миксины.
В том и дело, меня всегда интересовал вопрос, если у миксина нет аргументов, то почему бы не использовать абстрактный класс. Но ответ на этот вопрос в сообщении выше.
Устаревшая технология, которая уже не используется после появления нативных CSS переменных и calc.
Так же она не работает при разработке приложений и сайтов на удаленном дев-окружении.
Да и по факту от нее больше проблем чем каких-либо осязаемых преимуществ.
CSS-переменные поддерживаются всеми браузерами 7 последних лет.
Я пришел в разработку 4 года назад.
Всю мою карьеру, начиная от маленькой веб-студии, заканчивая текущим местом работы в бигтехе, я пишу стили с использованием препроцессора стилей.
Выводы сделайте сами.
на стартовой заглушке "ускрояем"
Ох. Не заметил, исправлю. Спасибо большое!)
uzbekstan
Чтоб ты понимал братюня... начинающий - это Я, и я использую note pad ++, а про VSCode я узнал недавно от украинского блогера, который к сожалению лучше чем ты понимает состояние новичка/начинающего и умеет действительно по настоящему методично и по полочкам объяснять что к чему, зачем и для чего. Ты же сильно торопишься. Такое впечатление, что твоя задача быстро и бегло выложить материал, а понял тебя кто-то или нет, это уже не твоя проблема, была бы статистика просмотров и комментариев, а там пофиг на остальное. Бесспорно контент интересный но трудноусвояемый ввиду такой специфический подачи материала, я бы сказал не для широкого спектра людей.
Мой контент на канале с самого его основания идёт последовательно от теме к теме, где я разжевываю всё, от IDE до последних тем по JS на канале.
Если зритель ознакомился со всем контентом до этого (включая мастер-класс, вышедший ДО этого гайда по Sass), то ему будет понятно всё из этого видео.
Если ты считаешь, что я должен подстраивать каждое свое видео под «абсолютно большинство», то нет, ты не прав. Я делаю так, как хочу, так, как умею, следую своему заранее намеченному плану.
Над темпом речи я работаю, но сильно замедлить его вряд ли когда-нибудь получится.
Если тебя не устраивает моя подача, не смотри. Я же найду «своего» зрителя. Да и, кажется, уже нашел, судя по статистике роста аудитории.
Это Женя что ли, который фрилансер по жизни ?
С 15 минуты уже непонятно((
Так как идёт повествование, но без наглядного примера.
Для новичков сложно получилось 😢
Наглядный пример смотри в мастер-классе по верстке:
ruclips.net/p/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU
@@AleksanderLamkov благодарю, попробую сверстать
Такое ощущение, что ты куда то спешишь. У тебя суп варится на плите, или ты во время обеденного перерыва ролики записываешь?
На ютубе можно выставить увеличенную или уменьшенную скорость воспроизведения. Поставь 0.75, может будет получше.
how is it going in ruzzia?
PostCSS - препроцессор? О_О Ну и использовать Sass в 2024... Такое.
Не препроцессор, а постпроцессор?) Из разряда «реакт не фреймворк». Душно.
Ну а про «использовать Sass в 2024-м» вообще не понимаю предъявы.
То, что в чистом CSS завезли синтаксис вложенных селекторов, ещё не значит, что весь смысл препроцессоров сводится к нулю.