prowebber.ru - Тут есть все для настоящих вебмастеров

Мы в твиттере Наша страничка на FaceBook! Сообщество вебмастеров в VK Мы в телеграме!

PW — всё для вебмастера » Всё для DataLife Engine » DLE модули » LessForDle - модуль автокомпиляции LESS-файлов для DataLife Engine by ПафНутиЙ

LessForDle - модуль автокомпиляции LESS-файлов для DataLife Engine by ПафНутиЙ

Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно LessForDle - модуль автокомпиляции LESS-файлов для DataLife Engine by ПафНутиЙ.

LessForDle - модуль автокомпиляции LESS-файлов для DataLife Engine by ПафНутиЙ


Текущая версия модуля: 1.2.0
Версии DLE: 8.x - 9.x (проверялся на 9.8)
Автор модуля: ПафНутиЙ

Если вы, как и я, используете в работе LESS - этот модуль для вас!
Модуль основан на готовом классе lessphp и по сути является связкой этого класса и DLE, он автоматически компилит LESS-файлы шаблона, а подключается в main.tpl одной строкой.
Если вам не известно, что такое LESS - рекомендую почитать и попробовать, крайне полезная штука.

Для чего это?
* Для нормального использования LESS при вёрстке под CMS DLE.
* И как следствие - для удобной, быстрой и эффективной разработки сайта.

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

Установка:
- Загрузить содержимое папки upload из архива в корень сайта.
- В начале main.tpl прописать:
{include file="engine/modules/less/less.php"}

- По умолчанию подключается файл main.less из папки css текущего шаблона сайта, туда же записывается одноимённый css-файл, который и прописываем в head шаблона.
- Для указания собственных файлов и показа времени выполнения скрипта пишем примерно так:
{include file="engine/modules/less/less.php?&inputFile=/styles/file.less&outputFile=/css/style.css&showstat=y"}

- Для отключения сжатия пишем так:
{include file="engine/modules/less/less.php?&normal=y"}


Скачать модуль LessForDle, как всегда, можно только с github т.к. там удобнее поддерживать код и всегда актуальная версия.





+42

Просмотры: 6984 :: Комментарии (20) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1temka_sd

  • 30 апреля 2013 14:13
  • Регистрация: 24.10.2010
  • ICQ: 428286360
  • Комментариев: 21
  • Выкл.
Можно как-нибудь конвертировать обычный CSS в les?

0

#2ПафНутиЙ

  • 30 апреля 2013 18:24
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
temka_sd,
просто меняете расширение файла на .less
Misterio,
на здоровье)

--------------------

0

#3temka_sd

  • 2 мая 2013 06:30
  • Регистрация: 24.10.2010
  • ICQ: 428286360
  • Комментариев: 21
  • Выкл.
Слушай Павлик, можешь объяснить нормальным языком чем less лучше? Вот я поставлю его сейчас, на что это повлияет ? )

0

#4mako145

  • 2 мая 2013 08:30
  • Регистрация: 1.01.2013
  • ICQ: --
  • Комментариев: 80
  • Выкл.
temka_sd,
Почитай тут http://ru.wikipedia.org/wiki/LESS_(язык_стилей)
он намного сокращает время создания шаблона.

0

#5temka_sd

  • 2 мая 2013 08:37
  • Регистрация: 24.10.2010
  • ICQ: 428286360
  • Комментариев: 21
  • Выкл.
т.е если я сейчас изменю подключение css на less смысла особого не будет?

0

#6mako145

  • 2 мая 2013 08:43
  • Регистрация: 1.01.2013
  • ICQ: --
  • Комментариев: 80
  • Выкл.
temka_sd,
Нет, почитай в википедии там все понятно написано.Просто ней удобно редактировать.

0

#7ПафНутиЙ

  • 2 мая 2013 10:46
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
temka_sd,
Если просто заменить расширения css на less и подключить через модуль - кроме объединения всех файлов и минимизации нет ни какой выгоды (проще воспользоваться стандартным сжатием DLE)
LESS же ускоряет саму разработку вёрстки и шаблона.
Чем рассуждать - приведу простой пример:
LESS:
@color: #f96;
.border (@a = solid, @b = 1px, @c = darken(@color, 50)) {
    border: @a @b @c;
}
a {
    text-decoration: none;
    color: @color;
    .border;
    &:hover {
        color: lighten(@color, 20);
        .border(,,@color);
    }
    .menu & {
        .border(dashed, 2px,);
        &:hover {
            .border&
#40;solid, 2px, @color);
        }
    }
}

Превращается вот в такой css:
a {
  text-decoration: none;
  color: #f96;
  border: solid 1px #662200;
}
a:hover {
  color: #ffddcc;
  border: solid 1px #f96;
}
.menu a {
  border: dashed 2px #662200;
}
.menu a:hover {
  border: solid 2px #f96;
}

т.е. изменив в данном примере всего одно значение #f96 на #33f мы получим совершенно другой цвет ссылок по всему сайту.

--------------------

0

#8temka_sd

  • 2 мая 2013 13:02
  • Регистрация: 24.10.2010
  • ICQ: 428286360
  • Комментариев: 21
  • Выкл.
Ну вот теперь понятно ) Павлик не предоставляешь услуги по переписке CSS кода под LESS?

0

#9ПафНутиЙ

  • 2 мая 2013 14:48
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
temka_sd,
нет, я вообще не фрилансю и заказы не принимаю, делаю только то, что мне интересно.

--------------------

0

#10SaD

  • 2 мая 2013 19:32
  • Регистрация: 23.02.2011
  • ICQ: --
  • Комментариев: 498
За модуль плюс, однозначно.

Но сами Less и Sass, как по мне, тупиковые вещи. Изучать "синтаксис внутри синтаксиса", ради какого-то увеличения скорости? Не проще и не правильнее ли, это всё реализовать в редакторе кода, а не какой-то надстройке над языком? Если файл откроет кто-то посторонний, то он может просто не понять что это такое.

Все эти переменные и вложенность, кажутся удобными, только до определённой поры - пока их не станет слишком много. Когда их много, запутаться в них ещё легче, чем в обычном CSS.

И вообще, появление и популярность таких "компиляторов", очень плохой знак. Это значит. что сам CSS, катастрофически не успевает за развитием потребностей.

--------------------

0

#11BigDev

  • 2 мая 2013 19:43
  • Регистрация: 2.05.2013
  • ICQ: --
  • Комментариев: 7
ПафНутиЙ а какой прогой ты делаешь скриншоты, если не секрет?

0

#12ПафНутиЙ

  • 2 мая 2013 20:07
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
SaD,
Не соглашусь.
Вот представь, у тебя есть сайт, в нём оформлены такие логические вещи как сетка, формы, кнопки, попап-окошки, различные логически блоки в правой, левой и центральной частях сайта. Сайт большой, css > 500кб. Естественно по такому огромному файлу ориентироваться нереально, разбиваем его на несколько, каждый из которых отвечает за своё кусок оформления. grid.css, forms.css, sidebar-left.css, popups.css.
А как известно - чем большее кол-во файлов грузится - тем менее быстро всё происходит.
@import - только усугубит ситуацию.
А вот в less @import наоборот приветствуется, в результате мы просто подрубаем все файлы в один и на выходе имеем один css-файл. На мой взгляд гораздо удобнее редактировать несколько мелких файлов, чем один большой.
Ещё одно преимущество как раз в переменных - по началу, когда нет ни готовых набросков кода, ни опыта работы - довольно непросто осваивать less, я сам постоянно лезу в доки за помощью. Но как я показал в примере выше - мы можем "одним движением" сменить всё оформление сайта, достаточно накидать изначально переменные в один файл, цвета, градиенты, размеры грида у сетки, скругления углов, тени и т.п.
В итоге, для быстрого старта вёрстки просто изменяем значения этих переменных и имеем готовый скелет будущего сайта.
Несомненно less будет мешать, если ты не постоянно верстаешь, а вот когда ты вестаешь постоянно (работа такая или фрилансишь) и на вёрстку сайта даётся 3 дня - тут без готовых сниппетов не обойтись и less с возможностью моментально изменить заготовленный скелет - то, что доктор прописал )) К тому же готовые переменные здорово сокращают код:
.bxsh (@a = 0, @b = 0, @c = 10px, @d = rgba(0, 0, 0, 0.4) ) {
    -webkit-box-shadow: @a @b @c @d;
    -moz-box-shadow: @a @b @c @d;
    box-shadow: @a @b @c @d;
}

.class {
    .bxsh; //гораздо эффективнее, чем куча копипаста
}


Есть правда существенный минус - не подготовленному человеку тяжело отлаживать стили т.к. в браузере то он видит css, а править нужно less, однако нормальный редактор (рекомендую sublime text) исправляет ситуацию )

BigDev,
http://www.faststone.org/FSCaptureDetail.htm и обработка в ФШ (если речь идёт о картинке в этой новости)

--------------------

0

#13SaD

  • 2 мая 2013 20:50
  • Регистрация: 23.02.2011
  • ICQ: --
  • Комментариев: 498
ПафНутиЙ
Первое - не плюс, т.к. КСС файлы, в том-же ДЛЕ, можно в один сжатый собрать.

Я вообще не про то, хорош ли сам по себе LESS/SASS. Конечно хорош. Просто это по сути не "улучшение CSS", а его подмена. И именно это - плохо.
Все эти фишки с переменными и прочим, можно реализовать только в рамках редактора кода, в привычном оконном интерфейсе. Никак не касаясь самого кода. А когда код компилиться на стороне клиента или сервера, то это, уже каким-то программированием пахнет и разрушает саму идею о "простом CSS".

Видимо хороших программистов нет, которые могут написать нормальный редактор, тем более заточенный под CSS. Проще на Веб языке написать такую вот надстройку...

--------------------

0

#14werty1001

  • 2 мая 2013 21:41
  • Регистрация: 17.10.2010
  • ICQ: --
  • Комментариев: 51
По мне less полезные вещь, если есть опыт в css и html, например себе сайт замутить, но вот обычным людям, которые не понимают html, less покажется вообще тихим ужасом, им это лишнее, уж с css проще будет. Поэтому при фрилансе я пока решил не верстать с less, а универсальность закруглений и других подобныx фишек просто реализую путем перечисления через запятую всех селекторов и также в один клик можно все поменять, но тут собственно дело привычки.

Цитата: SaD
И вообще, появление и популярность таких "компиляторов", очень плохой знак. Это значит. что сам CSS, катастрофически не успевает за развитием потребностей.

Не соглашусь, less у нас не так популярен (мне кажется), а c css все в порядке, когда будет на less > 50% сайтов тогда, можно смело заявить о вымирании простого css как вида.

--------------------

0

#15ПафНутиЙ

  • 3 мая 2013 10:24
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
Цитата: SaD
А когда код компилиться на стороне клиента или сервера, то это, уже каким-то программированием пахнет и разрушает саму идею о "простом CSS".

Так и есть)
Просто за бугром нет четкого разделения программист/верстальщик (это мы всё живём с отставанием в несколько лет от всего мира в своём рунете). Есть фронтенд-разработчик, как правило это программист, научившийся верстать, отсюда и рождаются такие вещи как LESS, SASS, HAML (вообще ппц). Программист улучшает себе жизнь превращая неудобный для себя css в полупрограммный язык - думаю это нормально.

Года полтора назад у меня был нехилый холивар с программером по поводу использования/нет в проектах html5, когда не было утвержденной спецификации, но по сути html5 уже во всю шагал по забугорной сети. Всё решилось когда он узнал про всего один атрибут data-* Сейчас мы уже давно не делаем проектов не на html5, тоже самое происходит с препроцессорами (LESS, SASS, HAML), повсеместное внедрение - дело времени и конкуренции.

Цитата: SaD
Видимо хороших программистов нет, которые могут написать нормальный редактор, тем более заточенный под CSS.

http://topstyle4.com/ - отличнейший редактор, пользовался именно им до появления sublimetext.

--------------------

+1

#16daniilgr

  • 27 июня 2013 20:18
  • Регистрация: 12.11.2011
  • ICQ: --
  • Комментариев: 4
Теперь есть смысл верстать на LESS, большое спасибо за такой модуль!

0

#17ПафНутиЙ

  • 27 июня 2013 20:36
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
daniilgr,
Пользуйтесь на здоровье! Если нужно - могу обновить немного модуль. Подробнее о возможностях: https://github.com/pafnuty/LessForBitrix

--------------------

0

#18daniilgr

  • 27 июня 2013 22:50
  • Регистрация: 12.11.2011
  • ICQ: --
  • Комментариев: 4
ПафНутиЙ, почему-то не копмпилировалось следущее:
-webkit-filter: contrast(110%);
-webkit-filter: grayscale(115%);


0

#19ПафНутиЙ

  • 27 июня 2013 23:32
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
daniilgr,
попробуйте так, хотя я не уверен:
-webkit-filter: (~"contrast(110%)");
-webkit-filter: (~"grayscale(115%)");
полистайте ещё тикеты: https://github.com/leafo/lessphp/issues может вопрос уже поднимался.

--------------------

0

#20AlexeySivakov88

  • 6 сентября 2014 07:11
  • Регистрация: 6.09.2014
  • ICQ: --
  • Комментариев: 30
респект, модуль супер

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

SkripTers.biz - Снова с вами

https://culabra.ru — Блог вЭбмастЭра

DCOReARTs.COM - Услуги веб-дизайна и графики

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Наши баннеры
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Нужна ли категория "Интернет магазины"?

Да
Нет

Архив новостей
Апрель 2018 (342)
Март 2018 (498)
Февраль 2018 (410)
Январь 2018 (141)
Декабрь 2017 (27)
Ноябрь 2017 (7)

Последние комментарии:

  • Hosting Ukraine
  • Яндекс.Метрика

Искать людей

Ваши переписки