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

Question

[Vladimir Lukashev]

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

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

Все это поможет писать максимально оптимизированный код,

Answer 1

[iBird Rose]

если все равно только начинаешь изучать - переметнись на сторону sass) и сразу найдешь много гайдов и видеоуроков и всего прочего)

Comments

[Денис Инешин]

Будто бы по Less мало всего этого.

[iBird Rose]

Денис Инешин: ну я не знаю. я sass изучал. ну и там полно уроков. а раз человек тут спрашивает - думал не нашел) видимо не искал)

[Vladimir Lukashev]

Мне не нравится их логотип.

[Сергей]

Чо это sass (или scss) вдруг стал лучше то? Мне less больше нравится.
Можете не отвечать, сам знаю=)

[iBird Rose]

Сергей: я sass изучил так скажем не по своей воле. в работе требовалось больше не с нуля верстать, а вносить правки и апгрейдить чужие верстки. и в sass мне как раз понравился scss - потому что можно было просто скопипастить обычный css - и ничего не редактируя он бы скомпилился. и дальше уже юзать свои миксины и другие функции sass для внесения правок, без инклуда старой css и т.д.

Answer 2

[Роман]

Кстати с недавнего времени сам начал интересоваться.
Вот может помочь этот ресурс: sass-scss.ru
И вот эта либа: leafo.net/scssphp
Конкретно ее можно использовать и написать свою обертку даже. Или воспользоваться готовыми модулями на ее основе, например в wordpress:
https://ru.wordpress.org/plugins/wp-scss/
или битрикс:
marketplace.1c-bitrix.ru/solutions/olegpro.csscompiler
Там все интуитивно понятно. Компилятор работает хорошо. Остальное можно почерпнуть из sass-scss.ru

Comments

[dhat]

Все отлично, но вопрос о LESS)))

[Vladimir Lukashev]

Роман я так понял предложил методы, они как я понимаю универсальны для обоих препроцессоров, но мне хотелось бы почитать/посмотреть материалы именно по Less

Answer 3

[Vladimir Lukashev]

Нашел неплохой видеообзор о препроцессоре Less. Автор бегло рассказывает, но зато показывает много интересных нюансов.

www.youtube.com/playlist?list=PLX2yKxdx7ck-Ex9XFu8...

Answer 4

[Андрей Верх]

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

Answer 5

[Varb]

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 файла. Если он становится слишком большим, то как минимум можно вывести в отдельные файлы глобальные переменные и миксины, остальное - на твоё усмотрение

Comments

[Сергей delphinpro]

Использовать миксины для префиксов - это вчерашний день, и даже, не побоюсь этого слова, плохой тон.
Автопрефиксер прекрасно расставит вам все префиксы, причем только актуальные, либо те, которые вам нужны (тонко настраивается).