LESS за 50 минут | Учим препроцессор LESS
В этом уроке изучим препроцессор LESS. Вы научитесь работать с препроцессором LESS и использовать его возможности для верстки сайтов.
// Ссылки =================
Сайт LESS: lesscss.org/
Материалы урока: files.brainscloud.ru/file/pre...
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#less #css
Пікірлер: 116
Лови новый видос! Лайк поставил? На канал подписался?)
@vadim1907
5 жыл бұрын
Спасибо, очень информативно
Конец 2019, а видос на эту тему самый полезный. Спасибо автору!
Вот настолько интересное видео, что когда появляется реклама, хочеться посмотреть их хоть 3 штуки, чтобы пользу автору принести, хоть какая-то отдача )) P.S - Спасибо огромное, начал смотреть видео с портфолио, понял что нужно учить less, сижу учу, пока не выучу, портфолио не трону, ты просто лучший, спасибо большое.
@mirov17
Жыл бұрын
как успехи?
Ураааа!!!! Димон снял видос про препроцессор LESS - пошел делать кофе и смотреть!Спасибо!Лайк!
Спасибо! Очень нравятся Ваши уроки. Обучаюсь по ним эффективно.
Доступно и просто объясняете. Очень спасибо!
Дмитрий, спасибо большое за этот урок! Приятно слушать, доступно и просто объясняете. Подписываюсь на канал))
Огромное спасибо за данный ролик, самый информативный и полезный из всех, что я смотрел по данной теме!
Спасибо Дмитрий!!! Очень полезная информация!
Мощно) без всякой воды и 5 секундных раздумий))
Як завжди на висоті! дуже корисно. Дякую за працю!
Спасибо за урок! Особенно за сетку)))
спасибо, кратко и доступно для понимания
просто супер. очень доходчиво объясняешь. грех не поставить лайк
Как раз сегодня начал юзать препроцессоры и тут твой видос )
Сделай верстку с нуля с использованием препроцессоров и gulp или webpack =)
Спасибо за видео, очень понятно и полезно!
Очень полезное видео, спасибо!
спасибо за познавательный контент, в школе вкинули блок с less до js и немного путаница возникла из-за сжатого формата, а тут автор все хорошо и понятно с визуально приятной практикой объяснил.
Топовые обучалки!
Первый туториал, который не приходится слушать в ускорении. Лайк за скорость)
🌟🌟🌟🌟🌟 *TOP!!! Сложные вещи простыми словами!!!* 🌟🌟🌟🌟🌟
Уай! Уай! Братюня супер видос дорогой!
Очень доступно объясняешь! Повторяю комент: "Сделай верстку с нуля с использованием препроцессоров и gulp или webpack =)". Например, ActiveBox продолжение:)
Спасибо за хороший урок!
Спасибо вам! Приятно слушать. Все четко и грамотно, тембр голоса ласкает уши. Думаю буду еще ни раз пересматривать это видео! :)
Даёшь урок по SASS
Крайне редко видел чтобы на тысячу лайков был один диздайк)) Дмитрий как всегда все четко и по делу. Спасибо!
Всё повторила . Нормас !
очень круто!)))
Спасибо!
Конечно Лайк!!!
спасибо, очень полезно.
44:00 не работает почему то, .grid(@columns); подчеркивает красным, говорит ошибка
@user-xi2xh4yr9k
2 жыл бұрын
Error evaluating function `percentage`: argument must be a number
@user-xi2xh4yr9k
2 жыл бұрын
У меня работает, если: "width: percentage((@i / @columns), rem);"
@user-hr6qc8rg4w
2 жыл бұрын
тоже не работает
Препод в универе не объяснил, хоть ты объяснил, спасибо)
это просто супер!!! спасибо от души!)) я начал с less,он мне понравился, и не хочу идти на sass(менять шило на мыло...). но по Less на "ру" пространстве, вменяемое сложно найти...((
812 лайков и 0 дизлайков это реальная оценка видео. И добавить нечего)
@BohdanVR666
3 жыл бұрын
За год 1.2к лайков и 1 диз
Спасибо
спасибо большое.... было бы интересно где ты берешь заказы - fl, upwork и тд?
Дмитрий добрый вечер :-) С Brackets у меня не получилось. Мой редактор в упор не видит этого расширения. Но зато в Vs Code получилось :-) Устанавливаем Vs Code в него расширение Easy Less. И радуемся его безукоризненной работе. Компилирует less файлы в css файлы при сохранении.
Здравствуйте! Спасибо вам за видео уроки, скажите пожалуйста есть ли альтернатива avcode?
Спасибо за урок! А как сделать, чтобы медиазапросы работали в хроме?
Сделай пожалуйста мини урок как подключить LESS к Sublime Text
Спасибо за видео.👍 Есть вопрос. Если на оборот, как сжатый цсс развернуть? Если его сжал кто-то другой.
супер
43:48 Если у вас не работает .grid(@columns); и выдает ошибку "Error evaluating function `percentage`: argument must be a number", то перепишите свойство "width: percentage((@i / @columns), rem);" P.S спасибо пользователю Елена Гахова
Так получается можно в начале всех "вспомогательных" less файлов ставить нижнее подчеркивание и тогда не понадобится писать строку main: и удалять файл css? А в @import "blocks/_btn" писать или без нижнего подчеркивания?
Пользуюсь less только для вложенностей в селекторах =)
👍
Спасибо Дмитрий! У Вас после настройки LESS AutoCompile после создания style.less создаётся style.css, а у меня не создаётся. С уважением к Вам Ахмад
Спасибо большое за видео а как сделать адаптивность чтобы при маленьком экране объекты встали в колонку?
@BrainsCloud
4 жыл бұрын
посмотрите курс по верстке сайта на моем канале
Как ты меняешь быстро цвет в брекетс при наводе курсором мыши на "color:" ?
@BrainsCloud
4 жыл бұрын
ctrl + e
Спасибо за видео! У вас есть видео как сверстать сайт со слайдингом из psd макета?
@BrainsCloud
5 жыл бұрын
посмотрите на канале плейлист по верстке сайта с нуля, в конце есть видео со слайдером, если вы под "слайдингом" имели это
Я почти не ставил лайки видосам на ютубе, а потом наткнулся на этот канал....
Спасибо сделаете пожалуйста видео по каким этапом стать версталчикм а то в сети много говно ты вроде достоверный)))
Что за плагин который дописывает код fw700 - font-weight: 700; на 09:30 ? Спасибо! Сделайте обзор на этот редактор, вернее на плагины...
@BrainsCloud
5 жыл бұрын
Есть на канале, пару видео назад
@Dimarik9165
5 жыл бұрын
@@BrainsCloud Спасибо, невнимательно посмотрел!
@aleksandrkedria4024
5 жыл бұрын
Emmet
Давай урок по sass. Год уже прошёл
У меня в сss файле коды не сжимается но index.html компилирует css код! Что делать??? Попробовал в Sublime 3 и в brackets безполезно ...( Можете посоветовать Дмитрий?
Сделай плиз по sass
Здравствуйте, можете посоветовать книги по LESS?
Хочу уроки php)
Понятно, что видео выложено давно, но я посмотрела только сейчас и у меня появился вопрос. В рекурсивном цикле, так ли важна строка,где задается ширина столбцов, я ее закоментила и цикл все равно работает. И мог бы кто нибудь обьяснить как работает все это, ведь чем меньше столбцов, тем больше должна быть их ширина в %, а тут совсем на оборот.
// compress у меня не работает. Не подскажите как это решить?
Расскажите пожалуйста как в Brackets установить HTML препроцессор Jade. И как им начать пользоваться.
@BrainsCloud
4 жыл бұрын
я такими извращениями не пользуюсь )
@developman-ai
4 жыл бұрын
@@BrainsCloud понятно, просто не знаете, а эти "извращения" требуют крупные компании на вакансии HTML верстальщика, вместе с LESS.
@vitalii4287
4 жыл бұрын
@@developman-ai А вы ,я смотрю, сходу в крупную компанию собрались?
@developman-ai
4 жыл бұрын
@@vitalii4287 да
не работает вставка @{img}...(( буду гуглить.)) а так, спасибо!)
Я установил все как есть на брекетсе но все равно лесс файл не работает
От вас бы ещё видео про pug..
@BrainsCloud
4 жыл бұрын
Такого точно не будет
Я тебя спросить хотел, как ты относишься к тому, что бутстрап полностью пересирает разметку html ? Везде и всюду пишут, что html нужен для семантической разметки и месиво из дивов и классов этому точно не способствует Как ты вообще относишься к этому ? Проблема ли это или просто каждому свой инструмент ? И как часто сам используешь bootstrap ?
@BrainsCloud
5 жыл бұрын
Для каждого инструмента есть свое применение. Бутстрап использую - сетку, и иногда некоторые js компоненты, в зависимости от проекта.
@pilyugin
5 жыл бұрын
@@BrainsCloud кажется, дивы не влияют на семантику... поисковики же ищут семантические теги и им должно быть по барабану на эти рабочие моменты разметки... они все равно найдут титл, нав и другие теги... или я ошибаюсь?)
@user-kj4db2mz2s
5 жыл бұрын
@@BrainsCloud Понял, спасибо за ответ
@user-wm4xh4ho2t
5 жыл бұрын
@@user-kj4db2mz2s можно неплохо совмещать семантические теги с бутстрап классами
Блин, у меня одного ломается миксин на моменте с зеленой кнопкой? Не понимаю, почему он не хочет красить ее в зеленый. Вроде все так же как на видео сделал.
3 раз смотрю память не очень 👍👍😂😂😂
Дмитрий. А какая версия Браскетс у вас стоит. Мой Браскетс в упор не видит этот плагин.
@BrainsCloud
5 жыл бұрын
Сергей Кондулуков последняя
@user-qh5fr3yo1w
5 жыл бұрын
Дмитрий, может быть дадите ссылку. Я тоже скачал последнюю версию с официального сайта, но этого расширения Бракетс не видит.
@BrainsCloud
5 жыл бұрын
@@user-qh5fr3yo1w brackets.io/
Я так понял, этот препроцессор предназначен для оптимизации кода.
Для себя не увидел плюсов относительно просто использования CSS. Только усложняет нормальное использование CSS, нежели чем дает что-то существенно весомое, что перевешивает: время изучение этих препроцессоров, написание доп. код обертки для CSS. Препроцессоры - это попытка из CSS сделать некий суррогата ЯП, что уже сделали конструкторы сайтов в гораздо лучшем виде и на более высоком уровне.
@KuKu_RuKu88
4 жыл бұрын
Если честно, я тоже не увидел ничего что ускорило бы мою работу !!! Весь смысл, если я правильно понял, быстро поменять некоторые блоки, если нужно !!! Лично по мне, можно и переписать блоки самому и без less !!! Но вот если большой сайт, еще и чужой, да с лессом, тогда финиш - не разберешься !!!
Пригодится
Какой ты быстрый..как по.....как река..как река быстрый)))
brackets очень классный был... но он не развивается. постепенно ушел с него.
на 27 минуте LESS перестал работать
Ты просто крут 993 лайка к 0))
5:42 казалось бы, причем тут Украина?
Еще один язык программирование
таймкоди не помешали би
Дмитрий спасибо за уроки! Всегда слежу за вашим каналом. Но лично мое мнение на счет препроцессора - никакой экономии в этом нет. На создание переменных, мексин, и подключении всего этого уходит как минимум столько же времени ( а может даже и больше ), чем если б я лишний раз повторился в обычном CSS. При создании URL для картинок это вообще в два раза дольше прописывать чем в обычном режиме. Ну сколько, в среднем, повторятся кнопки или цвета на среднестатистической сайте - 5, 10, ну пусть 20 раз. Так Вам же не приходится их заново писать, просто копируем, если нужно немного корректируем. Короче говоря приходится это учить только из-за того что на студиях этим пользуются.
@kvaqich
4 жыл бұрын
Ну пусть ты 20 раз скопировал кнопку. А когда захочешь менять, то будешь 20 раз менять каждую и так во всём. А объём кода значительно увеличится, так как ты одну и ту уж сущность 20 раз написал.
Как блокбастер посмотрел...
Кликбейт, видео длится 48 минут
Спасибо!
Спасибо
Спасибо