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

@sartjhon3300

5 ай бұрын

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

@OlegNaumov-me6yj

4 ай бұрын

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

@AleksanderLamkov

4 ай бұрын

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

@user-ph3sz6fd3z

2 ай бұрын

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

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

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

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

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

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

@AleksanderLamkov

5 ай бұрын

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

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

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

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

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

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

@AleksanderLamkov

5 ай бұрын

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

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

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

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

Спасибо!

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

@AleksanderLamkov

5 ай бұрын

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

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

@alemorohere

5 ай бұрын

Я самоучка

@AleksanderLamkov

5 ай бұрын

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

@alemorohere

5 ай бұрын

@@AleksanderLamkov спасибо😉

@yansobol9529

5 ай бұрын

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

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

@AleksanderLamkov

5 ай бұрын

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

@magazila

5 ай бұрын

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

спасибо

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

@AleksanderLamkov

3 ай бұрын

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

@user-do3or8jr7v

3 ай бұрын

@@AleksanderLamkov Спасибо

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

@AleksanderLamkov

2 ай бұрын

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

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

@AleksanderLamkov

2 ай бұрын

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

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

@AleksanderLamkov

16 күн бұрын

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

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

@AleksanderLamkov

15 күн бұрын

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

Отличный урок, лишь пара замечаний. Первое: в VS Code так же есть расширения, автоматизирующие работу с SASS. И второе: амперсанД пишется с Д на конце))

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

@AleksanderLamkov

4 ай бұрын

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

@RomanB-od1qn

4 ай бұрын

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

@AleksanderLamkov

4 ай бұрын

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

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

@AleksanderLamkov

3 ай бұрын

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

@user-do3or8jr7v

3 ай бұрын

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

а не проще ли использовать команду sass --watch style.scss:style.css в терминале чем устанавливать и настраивать стороннее приложение?

@AleksanderLamkov

11 күн бұрын

Проще один раз настроить, чтобы потом запускать одной кнопкой. А ещё лучше - поставить плагин Live Sass Compiler.

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

Ай бұрын

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

ошибка: scss : Имя "scss" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте п равильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + scss styles.scss styles.css + ~~~~ + CategoryInfo : ObjectNotFound: (scss:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

@AleksanderLamkov

2 күн бұрын

Нужно в начале команды не "scss" указывать, а "sass". А вообще, если у тебя VSCode, можешь не мучаться с командами и установить плагин Live Sass Compiler поставить. С ним попроще будет.

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

@AleksanderLamkov

15 күн бұрын

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

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

@AleksanderLamkov

19 күн бұрын

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

@user-lp5yk3gu4y

19 күн бұрын

Спасибо 🙏

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

@ukraine1514

Ай бұрын

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

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

@AleksanderLamkov

5 ай бұрын

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

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

@AleksanderLamkov

16 күн бұрын

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

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

@AleksanderLamkov

5 ай бұрын

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

@AleksanderLamkov

5 ай бұрын

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

@otsv-un2bd

5 ай бұрын

да, Live Sass Compiler

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

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

@AleksanderLamkov

5 ай бұрын

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

@enot_poloskun007

5 ай бұрын

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

@ilgizreklama

4 ай бұрын

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

@enot_poloskun007

4 ай бұрын

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

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

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

@AleksanderLamkov

3 ай бұрын

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

@xMurieLLx

3 ай бұрын

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

@AleksanderLamkov

3 ай бұрын

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

@AleksanderLamkov

3 ай бұрын

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

@xMurieLLx

3 ай бұрын

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

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

@AleksanderLamkov

5 ай бұрын

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

@carry-on-chaos4032

5 ай бұрын

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

@AleksanderLamkov

5 ай бұрын

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

@carry-on-chaos4032

5 ай бұрын

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

@carry-on-chaos4032

5 ай бұрын

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

uzbekstan

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

@AleksanderLamkov

5 ай бұрын

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

@nurzhanovchanel

5 ай бұрын

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

@AleksanderLamkov

5 ай бұрын

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

@nurzhanovchanel

5 ай бұрын

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

@AleksanderLamkov

5 ай бұрын

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

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

@AleksanderLamkov

2 ай бұрын

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

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

@AleksanderLamkov

5 ай бұрын

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

@smartcompany11

5 ай бұрын

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

@web__pavlovo

5 ай бұрын

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

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

@AleksanderLamkov

3 ай бұрын

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

@user-mx2lv3kv4z

3 ай бұрын

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

how is it going in ruzzia?

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

@AleksanderLamkov

Ай бұрын

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

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

@AleksanderLamkov

4 ай бұрын

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

@CanumVenaticorum

4 ай бұрын

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

@AleksanderLamkov

4 ай бұрын

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

@CanumVenaticorum

4 ай бұрын

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

@AleksanderLamkov

4 ай бұрын

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

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

@AleksanderLamkov

Ай бұрын

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

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

@AleksanderLamkov

24 күн бұрын

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

@evgeniy3370

16 күн бұрын

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

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

@AleksanderLamkov

Ай бұрын

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