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

  • @BrainsCloud
    @BrainsCloud5 жыл бұрын

    Лови новый видос! Лайк поставил? На канал подписался?)

  • @vadim1907

    @vadim1907

    5 жыл бұрын

    Спасибо, очень информативно

  • @udalov_travel
    @udalov_travel4 жыл бұрын

    Конец 2019, а видос на эту тему самый полезный. Спасибо автору!

  • @progerlife6690
    @progerlife66905 жыл бұрын

    Ураааа!!!! Димон снял видос про препроцессор LESS - пошел делать кофе и смотреть!Спасибо!Лайк!

  • @tamaravardanyan2883
    @tamaravardanyan28832 жыл бұрын

    Доступно и просто объясняете. Очень спасибо!

  • @satanist70
    @satanist703 жыл бұрын

    Вот настолько интересное видео, что когда появляется реклама, хочеться посмотреть их хоть 3 штуки, чтобы пользу автору принести, хоть какая-то отдача )) P.S - Спасибо огромное, начал смотреть видео с портфолио, понял что нужно учить less, сижу учу, пока не выучу, портфолио не трону, ты просто лучший, спасибо большое.

  • @mirov17

    @mirov17

    Жыл бұрын

    как успехи?

  • @user-zm2iu3in4z
    @user-zm2iu3in4z4 жыл бұрын

    Як завжди на висоті! дуже корисно. Дякую за працю!

  • @olgaorlova2131
    @olgaorlova21312 жыл бұрын

    Спасибо! Очень нравятся Ваши уроки. Обучаюсь по ним эффективно.

  • @user-tw7tt2xi4t
    @user-tw7tt2xi4t4 жыл бұрын

    Дмитрий, спасибо большое за этот урок! Приятно слушать, доступно и просто объясняете. Подписываюсь на канал))

  • @pilyugin
    @pilyugin5 жыл бұрын

    Мощно) без всякой воды и 5 секундных раздумий))

  • @akhmad_goytinski
    @akhmad_goytinski2 жыл бұрын

    Спасибо Дмитрий!!! Очень полезная информация!

  • @user-lf2js4kg5t
    @user-lf2js4kg5t4 жыл бұрын

    Огромное спасибо за данный ролик, самый информативный и полезный из всех, что я смотрел по данной теме!

  • @eb6006
    @eb60065 жыл бұрын

    Даёшь урок по SASS

  • @iryna4898
    @iryna48985 жыл бұрын

    спасибо, кратко и доступно для понимания

  • @zafarasrorov3687
    @zafarasrorov36873 жыл бұрын

    просто супер. очень доходчиво объясняешь. грех не поставить лайк

  • @Viktorres1
    @Viktorres14 жыл бұрын

    Спасибо за урок! Особенно за сетку)))

  • @enot_poloskun007
    @enot_poloskun0076 ай бұрын

    спасибо за познавательный контент, в школе вкинули блок с less до js и немного путаница возникла из-за сжатого формата, а тут автор все хорошо и понятно с визуально приятной практикой объяснил.

  • @aj-alex
    @aj-alex Жыл бұрын

    Спасибо за хороший урок!

  • @user-px6kj3qv2u
    @user-px6kj3qv2u2 жыл бұрын

    Спасибо за видео, очень понятно и полезно!

  • @FoolsINTheSuN
    @FoolsINTheSuN2 жыл бұрын

    Первый туториал, который не приходится слушать в ускорении. Лайк за скорость)

  • @linkernick5379
    @linkernick53794 жыл бұрын

    Очень полезное видео, спасибо!

  • @user-kj4db2mz2s
    @user-kj4db2mz2s5 жыл бұрын

    Как раз сегодня начал юзать препроцессоры и тут твой видос )

  • @aleksandrkedria4024
    @aleksandrkedria40245 жыл бұрын

    Сделай верстку с нуля с использованием препроцессоров и gulp или webpack =)

  • @FiremanTV
    @FiremanTV4 жыл бұрын

    Топовые обучалки!

  • @mozgoreshka3985
    @mozgoreshka39854 жыл бұрын

    Очень доступно объясняешь! Повторяю комент: "Сделай верстку с нуля с использованием препроцессоров и gulp или webpack =)". Например, ActiveBox продолжение:)

  • @EUC_Novak
    @EUC_Novak3 жыл бұрын

    🌟🌟🌟🌟🌟 *TOP!!! Сложные вещи простыми словами!!!* 🌟🌟🌟🌟🌟

  • @user-xf8tk8np2h
    @user-xf8tk8np2h3 жыл бұрын

    Уай! Уай! Братюня супер видос дорогой!

  • @neecsman5502
    @neecsman55024 жыл бұрын

    Спасибо вам! Приятно слушать. Все четко и грамотно, тембр голоса ласкает уши. Думаю буду еще ни раз пересматривать это видео! :)

  • @senkamatic8448
    @senkamatic84483 жыл бұрын

    очень круто!)))

  • @wb_flow
    @wb_flow3 жыл бұрын

    Крайне редко видел чтобы на тысячу лайков был один диздайк)) Дмитрий как всегда все четко и по делу. Спасибо!

  • @tanyamarushka7251
    @tanyamarushka72512 жыл бұрын

    Спасибо!

  • @tixsa1438
    @tixsa14385 жыл бұрын

    Всё повторила . Нормас !

  • @olegrotari3878
    @olegrotari38783 жыл бұрын

    Конечно Лайк!!!

  • @masha18able1
    @masha18able12 жыл бұрын

    44:00 не работает почему то, .grid(@columns); подчеркивает красным, говорит ошибка

  • @user-xi2xh4yr9k

    @user-xi2xh4yr9k

    2 жыл бұрын

    Error evaluating function `percentage`: argument must be a number

  • @user-xi2xh4yr9k

    @user-xi2xh4yr9k

    2 жыл бұрын

    У меня работает, если: "width: percentage((@i / @columns), rem);"

  • @user-hr6qc8rg4w

    @user-hr6qc8rg4w

    2 жыл бұрын

    тоже не работает

  • @outcast-cr5yy
    @outcast-cr5yy2 жыл бұрын

    спасибо, очень полезно.

  • @PAWELRAKETA
    @PAWELRAKETA2 жыл бұрын

    Препод в универе не объяснил, хоть ты объяснил, спасибо)

  • @user-qh5fr3yo1w
    @user-qh5fr3yo1w4 жыл бұрын

    Дмитрий добрый вечер :-) С Brackets у меня не получилось. Мой редактор в упор не видит этого расширения. Но зато в Vs Code получилось :-) Устанавливаем Vs Code в него расширение Easy Less. И радуемся его безукоризненной работе. Компилирует less файлы в css файлы при сохранении.

  • @alexws5101
    @alexws51014 жыл бұрын

    это просто супер!!! спасибо от души!)) я начал с less,он мне понравился, и не хочу идти на sass(менять шило на мыло...). но по Less на "ру" пространстве, вменяемое сложно найти...((

  • @ertargn
    @ertargn5 жыл бұрын

    спасибо большое.... было бы интересно где ты берешь заказы - fl, upwork и тд?

  • @ildarfatakhov8254
    @ildarfatakhov82545 жыл бұрын

    Спасибо

  • @oleksandrvorzhev5026
    @oleksandrvorzhev50264 жыл бұрын

    812 лайков и 0 дизлайков это реальная оценка видео. И добавить нечего)

  • @BohdanVR666

    @BohdanVR666

    3 жыл бұрын

    За год 1.2к лайков и 1 диз

  • @Dreamer_78
    @Dreamer_784 жыл бұрын

    Здравствуйте! Спасибо вам за видео уроки, скажите пожалуйста есть ли альтернатива avcode?

  • @johny_pi
    @johny_pi3 жыл бұрын

    Спасибо за видео.👍 Есть вопрос. Если на оборот, как сжатый цсс развернуть? Если его сжал кто-то другой.

  • @Den_camrad
    @Den_camrad3 жыл бұрын

    Спасибо за урок! А как сделать, чтобы медиазапросы работали в хроме?

  • @user-ci2rv2re2z
    @user-ci2rv2re2z5 жыл бұрын

    Сделай пожалуйста мини урок как подключить LESS к Sublime Text

  • @Dmitrysib85
    @Dmitrysib854 жыл бұрын

    Так получается можно в начале всех "вспомогательных" less файлов ставить нижнее подчеркивание и тогда не понадобится писать строку main: и удалять файл css? А в @import "blocks/_btn" писать или без нижнего подчеркивания?

  • @Zahadym
    @Zahadym5 жыл бұрын

    супер

  • @sergeymoskalenko282
    @sergeymoskalenko2822 жыл бұрын

    👍

  • @akhmad_goytinski
    @akhmad_goytinski2 жыл бұрын

    Спасибо Дмитрий! У Вас после настройки LESS AutoCompile после создания style.less создаётся style.css, а у меня не создаётся. С уважением к Вам Ахмад

  • @askhat9232
    @askhat92323 жыл бұрын

    Пользуюсь less только для вложенностей в селекторах =)

  • @sardoribragimov5255
    @sardoribragimov52554 жыл бұрын

    Спасибо большое за видео а как сделать адаптивность чтобы при маленьком экране объекты встали в колонку?

  • @BrainsCloud

    @BrainsCloud

    4 жыл бұрын

    посмотрите курс по верстке сайта на моем канале

  • @user-qp9cl8kb3h
    @user-qp9cl8kb3h Жыл бұрын

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

  • @firdavsdadakhanov5087
    @firdavsdadakhanov50874 жыл бұрын

    У меня в сss файле коды не сжимается но index.html компилирует css код! Что делать??? Попробовал в Sublime 3 и в brackets безполезно ...( Можете посоветовать Дмитрий?

  • @Kiruha307
    @Kiruha3073 жыл бұрын

    Я почти не ставил лайки видосам на ютубе, а потом наткнулся на этот канал....

  • @user-jd5zy3jf1y
    @user-jd5zy3jf1y5 жыл бұрын

    Спасибо за видео! У вас есть видео как сверстать сайт со слайдингом из psd макета?

  • @BrainsCloud

    @BrainsCloud

    5 жыл бұрын

    посмотрите на канале плейлист по верстке сайта с нуля, в конце есть видео со слайдером, если вы под "слайдингом" имели это

  • @gvitoss
    @gvitoss4 жыл бұрын

    Как ты меняешь быстро цвет в брекетс при наводе курсором мыши на "color:" ?

  • @BrainsCloud

    @BrainsCloud

    4 жыл бұрын

    ctrl + e

  • @user-ke4cv5jh7y
    @user-ke4cv5jh7y Жыл бұрын

    Здравствуйте, можете посоветовать книги по LESS?

  • @Dimarik9165
    @Dimarik91655 жыл бұрын

    Что за плагин который дописывает код fw700 - font-weight: 700; на 09:30 ? Спасибо! Сделайте обзор на этот редактор, вернее на плагины...

  • @BrainsCloud

    @BrainsCloud

    5 жыл бұрын

    Есть на канале, пару видео назад

  • @Dimarik9165

    @Dimarik9165

    5 жыл бұрын

    @@BrainsCloud Спасибо, невнимательно посмотрел!

  • @aleksandrkedria4024

    @aleksandrkedria4024

    5 жыл бұрын

    Emmet

  • @DieMoorsoldaten
    @DieMoorsoldaten4 жыл бұрын

    // compress у меня не работает. Не подскажите как это решить?

  • @developman-ai
    @developman-ai4 жыл бұрын

    Расскажите пожалуйста как в Brackets установить HTML препроцессор Jade. И как им начать пользоваться.

  • @BrainsCloud

    @BrainsCloud

    4 жыл бұрын

    я такими извращениями не пользуюсь )

  • @developman-ai

    @developman-ai

    4 жыл бұрын

    @@BrainsCloud понятно, просто не знаете, а эти "извращения" требуют крупные компании на вакансии HTML верстальщика, вместе с LESS.

  • @vitalii4287

    @vitalii4287

    4 жыл бұрын

    @@developman-ai А вы ,я смотрю, сходу в крупную компанию собрались?

  • @developman-ai

    @developman-ai

    4 жыл бұрын

    @@vitalii4287 да

  • @galandec2000
    @galandec20003 жыл бұрын

    не работает вставка @{img}...(( буду гуглить.)) а так, спасибо!)

  • @kapitalist24
    @kapitalist244 жыл бұрын

    Я установил все как есть на брекетсе но все равно лесс файл не работает

  • @azamjon40
    @azamjon404 жыл бұрын

    Спасибо сделаете пожалуйста видео по каким этапом стать версталчикм а то в сети много говно ты вроде достоверный)))

  • @shairongodly3815
    @shairongodly38152 жыл бұрын

    43:48 Если у вас не работает .grid(@columns); и выдает ошибку "Error evaluating function `percentage`: argument must be a number", то перепишите свойство "width: percentage((@i / @columns), rem);" P.S спасибо пользователю Елена Гахова

  • @user-kj4db2mz2s
    @user-kj4db2mz2s5 жыл бұрын

    Я тебя спросить хотел, как ты относишься к тому, что бутстрап полностью пересирает разметку html ? Везде и всюду пишут, что html нужен для семантической разметки и месиво из дивов и классов этому точно не способствует Как ты вообще относишься к этому ? Проблема ли это или просто каждому свой инструмент ? И как часто сам используешь bootstrap ?

  • @BrainsCloud

    @BrainsCloud

    5 жыл бұрын

    Для каждого инструмента есть свое применение. Бутстрап использую - сетку, и иногда некоторые js компоненты, в зависимости от проекта.

  • @pilyugin

    @pilyugin

    5 жыл бұрын

    @@BrainsCloud кажется, дивы не влияют на семантику... поисковики же ищут семантические теги и им должно быть по барабану на эти рабочие моменты разметки... они все равно найдут титл, нав и другие теги... или я ошибаюсь?)

  • @user-kj4db2mz2s

    @user-kj4db2mz2s

    5 жыл бұрын

    @@BrainsCloud Понял, спасибо за ответ

  • @user-wm4xh4ho2t

    @user-wm4xh4ho2t

    5 жыл бұрын

    @@user-kj4db2mz2s можно неплохо совмещать семантические теги с бутстрап классами

  • @dobletroy8367
    @dobletroy83673 жыл бұрын

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

  • @rshifter8916
    @rshifter89163 жыл бұрын

    Давай урок по sass. Год уже прошёл

  • @user-jn8wj8ck4n
    @user-jn8wj8ck4n5 жыл бұрын

    Хочу уроки php)

  • @user-wb2cp1cu2e
    @user-wb2cp1cu2e5 жыл бұрын

    Сделай плиз по sass

  • @iddev6680
    @iddev66803 жыл бұрын

    3 раз смотрю память не очень 👍👍😂😂😂

  • @DerAleksey
    @DerAleksey4 жыл бұрын

    Я так понял, этот препроцессор предназначен для оптимизации кода.

  • @oleksandrvorzhev5026
    @oleksandrvorzhev50264 жыл бұрын

    От вас бы ещё видео про pug..

  • @BrainsCloud

    @BrainsCloud

    4 жыл бұрын

    Такого точно не будет

  • @Leoboy400
    @Leoboy4005 жыл бұрын

    Пригодится

  • @LLuKKen
    @LLuKKen5 жыл бұрын

    Какой ты быстрый..как по.....как река..как река быстрый)))

  • @am35a
    @am35a4 жыл бұрын

    brackets очень классный был... но он не развивается. постепенно ушел с него.

  • @user-qh5fr3yo1w
    @user-qh5fr3yo1w4 жыл бұрын

    Дмитрий. А какая версия Браскетс у вас стоит. Мой Браскетс в упор не видит этот плагин.

  • @BrainsCloud

    @BrainsCloud

    4 жыл бұрын

    Сергей Кондулуков последняя

  • @user-qh5fr3yo1w

    @user-qh5fr3yo1w

    4 жыл бұрын

    Дмитрий, может быть дадите ссылку. Я тоже скачал последнюю версию с официального сайта, но этого расширения Бракетс не видит.

  • @BrainsCloud

    @BrainsCloud

    4 жыл бұрын

    @@user-qh5fr3yo1w brackets.io/

  • @user-pi4xs4cl8i
    @user-pi4xs4cl8i3 жыл бұрын

    на 27 минуте LESS перестал работать

  • @Ion_officcially
    @Ion_officcially4 жыл бұрын

    Ты просто крут 993 лайка к 0))

  • @irustv7674
    @irustv76744 жыл бұрын

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

  • @KuKu_RuKu88

    @KuKu_RuKu88

    4 жыл бұрын

    Если честно, я тоже не увидел ничего что ускорило бы мою работу !!! Весь смысл, если я правильно понял, быстро поменять некоторые блоки, если нужно !!! Лично по мне, можно и переписать блоки самому и без less !!! Но вот если большой сайт, еще и чужой, да с лессом, тогда финиш - не разберешься !!!

  • @BohdanVR666
    @BohdanVR6663 жыл бұрын

    5:42 казалось бы, причем тут Украина?

  • @user-mz6jw7xx2z
    @user-mz6jw7xx2z4 жыл бұрын

    Еще один язык программирование

  • @volodymyrmatselyukh8808
    @volodymyrmatselyukh88082 жыл бұрын

    таймкоди не помешали би

  • @faluna2957
    @faluna29574 жыл бұрын

    Дмитрий спасибо за уроки! Всегда слежу за вашим каналом. Но лично мое мнение на счет препроцессора - никакой экономии в этом нет. На создание переменных, мексин, и подключении всего этого уходит как минимум столько же времени ( а может даже и больше ), чем если б я лишний раз повторился в обычном CSS. При создании URL для картинок это вообще в два раза дольше прописывать чем в обычном режиме. Ну сколько, в среднем, повторятся кнопки или цвета на среднестатистической сайте - 5, 10, ну пусть 20 раз. Так Вам же не приходится их заново писать, просто копируем, если нужно немного корректируем. Короче говоря приходится это учить только из-за того что на студиях этим пользуются.

  • @kvaqich

    @kvaqich

    4 жыл бұрын

    Ну пусть ты 20 раз скопировал кнопку. А когда захочешь менять, то будешь 20 раз менять каждую и так во всём. А объём кода значительно увеличится, так как ты одну и ту уж сущность 20 раз написал.

  • @user-nv1cs5vd3j
    @user-nv1cs5vd3j4 жыл бұрын

    Как блокбастер посмотрел...

  • @chelovek6035
    @chelovek60353 жыл бұрын

    Кликбейт, видео длится 48 минут

  • @maxivanov3339
    @maxivanov33393 жыл бұрын

    Спасибо!

  • @exploringtheworld8780
    @exploringtheworld87803 жыл бұрын

    Спасибо

  • @BraentR
    @BraentR3 жыл бұрын

    Спасибо

Келесі