LESS за 50 минут | Учим препроцессор LESS
Vložit
- čas přidán 12. 05. 2019
- В этом уроке изучим препроцессор 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
Лови новый видос! Лайк поставил? На канал подписался?)
Спасибо, очень информативно
Лайк поставил, как и под всеми остальными) Но хоть убейте, не пойму, для чего так все усложнять? Когда мы и так прописываем все стили под одним классом и в крайних случаях добавляем модификаторы при обычной CSS верстке. Вызвал нужный класс и все, без всей этой путаницы и бутербродов с сотней файлов... Я только начал. Сверстал ActivBox по урокам, Mogo уже самостоятельно, подглядев всего пару моментов. Столкнулся с тем, что для второго сайта, мне уже лень стало прописывать медиа запросы... Но LESS еще больше все усложняет...
Конец 2019, а видос на эту тему самый полезный. Спасибо автору!
Ураааа!!!! Димон снял видос про препроцессор LESS - пошел делать кофе и смотреть!Спасибо!Лайк!
Даёшь урок по SASS
Вот настолько интересное видео, что когда появляется реклама, хочеться посмотреть их хоть 3 штуки, чтобы пользу автору принести, хоть какая-то отдача ))
P.S - Спасибо огромное, начал смотреть видео с портфолио, понял что нужно учить less, сижу учу, пока не выучу, портфолио не трону, ты просто лучший, спасибо большое.
как успехи?
Спасибо за урок! Особенно за сетку)))
Доступно и просто объясняете. Очень спасибо!
Спасибо! Очень нравятся Ваши уроки. Обучаюсь по ним эффективно.
Дмитрий, спасибо большое за этот урок! Приятно слушать, доступно и просто объясняете. Подписываюсь на канал))
Як завжди на висоті! дуже корисно.
Дякую за працю!
Мощно) без всякой воды и 5 секундных раздумий))
Огромное спасибо за данный ролик, самый информативный и полезный из всех, что я смотрел по данной теме!
спасибо, кратко и доступно для понимания
Спасибо Дмитрий!!! Очень полезная информация!
Сделай верстку с нуля с использованием препроцессоров и gulp или webpack =)
просто супер. очень доходчиво объясняешь. грех не поставить лайк
Как раз сегодня начал юзать препроцессоры и тут твой видос )
Спасибо за хороший урок!
Очень полезное видео, спасибо!
Топовые обучалки!
Спасибо за видео, очень понятно и полезно!
спасибо за познавательный контент, в школе вкинули блок с less до js и немного путаница возникла из-за сжатого формата, а тут автор все хорошо и понятно с визуально приятной практикой объяснил.
Очень доступно объясняешь! Повторяю комент: "Сделай верстку с нуля с использованием препроцессоров и gulp или webpack =)". Например, ActiveBox продолжение:)
Первый туториал, который не приходится слушать в ускорении. Лайк за скорость)
🌟🌟🌟🌟🌟 *TOP!!! Сложные вещи простыми словами!!!* 🌟🌟🌟🌟🌟
Спасибо вам! Приятно слушать. Все четко и грамотно, тембр голоса ласкает уши. Думаю буду еще ни раз пересматривать это видео! :)
44:00 не работает почему то, .grid(@columns); подчеркивает красным, говорит ошибка
Error evaluating function `percentage`: argument must be a number
У меня работает, если:
"width: percentage((@i / @columns), rem);"
тоже не работает
Уай! Уай! Братюня супер видос дорогой!
Дмитрий добрый вечер :-) С Brackets у меня не получилось. Мой редактор в упор не видит этого расширения. Но зато в Vs Code получилось :-) Устанавливаем Vs Code в него расширение Easy Less. И радуемся его безукоризненной работе. Компилирует less файлы в css файлы при сохранении.
Крайне редко видел чтобы на тысячу лайков был один диздайк)) Дмитрий как всегда все четко и по делу. Спасибо!
это просто супер!!! спасибо от души!)) я начал с less,он мне понравился, и не хочу идти на sass(менять шило на мыло...). но по Less на "ру" пространстве, вменяемое сложно найти...((
очень круто!)))
Всё повторила . Нормас !
Препод в универе не объяснил, хоть ты объяснил, спасибо)
Конечно Лайк!!!
спасибо, очень полезно.
Спасибо!
спасибо большое.... было бы интересно где ты берешь заказы - fl, upwork и тд?
Спасибо
812 лайков и 0 дизлайков это реальная оценка видео. И добавить нечего)
За год 1.2к лайков и 1 диз
Здравствуйте! Спасибо вам за видео уроки, скажите пожалуйста есть ли альтернатива avcode?
Так получается можно в начале всех "вспомогательных" less файлов ставить нижнее подчеркивание и тогда не понадобится писать строку main: и удалять файл css? А в @import "blocks/_btn" писать или без нижнего подчеркивания?
Сделай пожалуйста мини урок как подключить LESS к Sublime Text
Спасибо за видео.👍
Есть вопрос. Если на оборот, как сжатый цсс развернуть? Если его сжал кто-то другой.
Спасибо за урок! А как сделать, чтобы медиазапросы работали в хроме?
Спасибо Дмитрий! У Вас после настройки LESS AutoCompile после создания style.less создаётся style.css, а у меня не создаётся. С уважением к Вам Ахмад
Пользуюсь less только для вложенностей в селекторах =)
Что за плагин который дописывает код fw700 - font-weight: 700; на 09:30 ? Спасибо! Сделайте обзор на этот редактор, вернее на плагины...
Есть на канале, пару видео назад
@@BrainsCloud Спасибо, невнимательно посмотрел!
Emmet
Спасибо большое за видео
а как сделать адаптивность чтобы при маленьком экране объекты встали в колонку?
посмотрите курс по верстке сайта на моем канале
Как ты меняешь быстро цвет в брекетс при наводе курсором мыши на "color:" ?
ctrl + e
Я почти не ставил лайки видосам на ютубе, а потом наткнулся на этот канал....
У меня в сss файле коды не сжимается но index.html компилирует css код! Что делать??? Попробовал в Sublime 3 и в brackets безполезно ...( Можете посоветовать Дмитрий?
Понятно, что видео выложено давно, но я посмотрела только сейчас и у меня появился вопрос. В рекурсивном цикле, так ли важна строка,где задается ширина столбцов, я ее закоментила и цикл все равно работает. И мог бы кто нибудь обьяснить как работает все это, ведь чем меньше столбцов, тем больше должна быть их ширина в %, а тут совсем на оборот.
супер
Спасибо за видео! У вас есть видео как сверстать сайт со слайдингом из psd макета?
посмотрите на канале плейлист по верстке сайта с нуля, в конце есть видео со слайдером, если вы под "слайдингом" имели это
Расскажите пожалуйста как в Brackets установить HTML препроцессор Jade. И как им начать пользоваться.
я такими извращениями не пользуюсь )
@@BrainsCloud понятно, просто не знаете, а эти "извращения" требуют крупные компании на вакансии HTML верстальщика, вместе с LESS.
@@developman-ai А вы ,я смотрю, сходу в крупную компанию собрались?
@@vitalii4287 да
Здравствуйте, можете посоветовать книги по LESS?
Давай урок по sass. Год уже прошёл
Спасибо сделаете пожалуйста видео по каким этапом стать версталчикм а то в сети много говно ты вроде достоверный)))
// compress у меня не работает. Не подскажите как это решить?
43:48
Если у вас не работает .grid(@columns);
и выдает ошибку "Error evaluating function `percentage`: argument must be a number",
то перепишите свойство "width: percentage((@i / @columns), rem);"
P.S спасибо пользователю Елена Гахова
👍
Хочу уроки php)
Я установил все как есть на брекетсе но все равно лесс файл не работает
не работает вставка @{img}...((
буду гуглить.))
а так, спасибо!)
3 раз смотрю память не очень 👍👍😂😂😂
Я тебя спросить хотел, как ты относишься к тому, что бутстрап полностью пересирает разметку html ? Везде и всюду пишут, что html нужен для семантической разметки и месиво из дивов и классов этому точно не способствует
Как ты вообще относишься к этому ? Проблема ли это или просто каждому свой инструмент ?
И как часто сам используешь bootstrap ?
Для каждого инструмента есть свое применение. Бутстрап использую - сетку, и иногда некоторые js компоненты, в зависимости от проекта.
@@BrainsCloud кажется, дивы не влияют на семантику... поисковики же ищут семантические теги и им должно быть по барабану на эти рабочие моменты разметки... они все равно найдут титл, нав и другие теги... или я ошибаюсь?)
@@BrainsCloud Понял, спасибо за ответ
@@user-kj4db2mz2s можно неплохо совмещать семантические теги с бутстрап классами
Для себя не увидел плюсов относительно просто использования CSS. Только усложняет нормальное использование CSS, нежели чем дает что-то существенно весомое, что перевешивает: время изучение этих препроцессоров, написание доп. код обертки для CSS. Препроцессоры - это попытка из CSS сделать некий суррогата ЯП, что уже сделали конструкторы сайтов в гораздо лучшем виде и на более высоком уровне.
Если честно, я тоже не увидел ничего что ускорило бы мою работу !!! Весь смысл, если я правильно понял, быстро поменять некоторые блоки, если нужно !!! Лично по мне, можно и переписать блоки самому и без less !!! Но вот если большой сайт, еще и чужой, да с лессом, тогда финиш - не разберешься !!!
Блин, у меня одного ломается миксин на моменте с зеленой кнопкой? Не понимаю, почему он не хочет красить ее в зеленый. Вроде все так же как на видео сделал.
Я так понял, этот препроцессор предназначен для оптимизации кода.
Сделай плиз по sass
От вас бы ещё видео про pug..
Такого точно не будет
Какой ты быстрый..как по.....как река..как река быстрый)))
brackets очень классный был... но он не развивается. постепенно ушел с него.
на 27 минуте LESS перестал работать
Дмитрий. А какая версия Браскетс у вас стоит. Мой Браскетс в упор не видит этот плагин.
Сергей Кондулуков последняя
Дмитрий, может быть дадите ссылку. Я тоже скачал последнюю версию с официального сайта, но этого расширения Бракетс не видит.
@@user-qh5fr3yo1w brackets.io/
Ты просто крут 993 лайка к 0))
Еще один язык программирование
Пригодится
5:42 казалось бы, причем тут Украина?
Дмитрий спасибо за уроки! Всегда слежу за вашим каналом. Но лично мое мнение на счет препроцессора - никакой экономии в этом нет. На создание переменных, мексин, и подключении всего этого уходит как минимум столько же времени ( а может даже и больше ), чем если б я лишний раз повторился в обычном CSS. При создании URL для картинок это вообще в два раза дольше прописывать чем в обычном режиме. Ну сколько, в среднем, повторятся кнопки или цвета на среднестатистической сайте - 5, 10, ну пусть 20 раз. Так Вам же не приходится их заново писать, просто копируем, если нужно немного корректируем. Короче говоря приходится это учить только из-за того что на студиях этим пользуются.
Ну пусть ты 20 раз скопировал кнопку. А когда захочешь менять, то будешь 20 раз менять каждую и так во всём. А объём кода значительно увеличится, так как ты одну и ту уж сущность 20 раз написал.
таймкоди не помешали би
Как блокбастер посмотрел...
Кликбейт, видео длится 48 минут
Спасибо!
Спасибо
Спасибо