Как применять Less на практике?

Может кто встречал видеоурок или статью о Less, где на примере верстки проекта показывается как максимально эффективно можно применять этот препроцессор.

1. Как эффективно применять примеси, где они нужны а где не очень;
2. Применение циклов на примере создания верстки для сайта;
3. Организация кода, стоит ли разбивать less на файлы (блоки);
Ну и т.д.

Все это поможет писать максимально оптимизированный код,
  • Вопрос задан
  • 859 просмотров
Пригласить эксперта
Ответы на вопрос 5
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
если все равно только начинаешь изучать - переметнись на сторону sass) и сразу найдешь много гайдов и видеоуроков и всего прочего)
Ответ написан
alone_lion1987
@alone_lion1987
Веб-разработчик
Кстати с недавнего времени сам начал интересоваться.
Вот может помочь этот ресурс: sass-scss.ru
И вот эта либа: leafo.net/scssphp
Конкретно ее можно использовать и написать свою обертку даже. Или воспользоваться готовыми модулями на ее основе, например в wordpress:
https://ru.wordpress.org/plugins/wp-scss/
или битрикс:
marketplace.1c-bitrix.ru/solutions/olegpro.csscompiler
Там все интуитивно понятно. Компилятор работает хорошо. Остальное можно почерпнуть из sass-scss.ru
Ответ написан
Lukavis
@Lukavis Автор вопроса
Нашел неплохой видеообзор о препроцессоре Less. Автор бегло рассказывает, но зато показывает много интересных нюансов.

www.youtube.com/playlist?list=PLX2yKxdx7ck-Ex9XFu8...
Ответ написан
Комментировать
sadisme
@sadisme
font-size:30rem
То как применять LESS, решать только вам, потому что нет никакого "оптимизированного кода". Каждый делает так, как ему быстрее и удобнее. Имхо, гораздо важнее документировать код, а как он будет написан, не так важно.
Ответ написан
Комментировать
@miaovarb
1. Очень удобно применять их, когда свойство имеет множество префиксов для разных браузеров, такие как transition, border-radius, transform и т.д. Пример:
.transition (@option: all, @time: 0.15s, @type: ease-in-out) {
  -webkit-transition: @option @time @type;
  -moz-transition: @option @time @type;
  -o-transition: @option @time @type;
  transition: @option @time @type;
}
.block {
  .transition;
}
.block2 {
  .transition(@option: height);
}

Так же удобно применять примеси для повторяющихся кусков кода.
2. Подробнее посмотри в этой статье: best-web-creation.com/articles/view/id/less-condit...
3. Зависит от размера твоего less файла. Если он становится слишком большим, то как минимум можно вывести в отдельные файлы глобальные переменные и миксины, остальное - на твоё усмотрение
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы