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

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Всё для 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
Просмотры: 6667 VIP ProWebber | Комментарии (20)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1temka_sd

  • 30 апреля 2013 14:13
  • Регистрация: 24.10.2010
  • ICQ: 428286360
  • Комментариев: 19
  • Выкл.
Можно как-нибудь конвертировать обычный 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
  • Комментариев: 19
  • Выкл.
Слушай Павлик, можешь объяснить нормальным языком чем less лучше? Вот я поставлю его сейчас, на что это повлияет ? )

0

#4mako145

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

0

#5temka_sd

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

0

#6mako145

  • 2 мая 2013 08:43
  • Регистрация: 1.01.2013
  • ICQ: --
  • Комментариев: 81
  • Выкл.
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
  • Комментариев: 19
  • Выкл.
Ну вот теперь понятно ) Павлик не предоставляешь услуги по переписке 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: --
  • Комментариев: 502
За модуль плюс, однозначно.

Но сами 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: --
  • Комментариев: 502
ПафНутиЙ
Первое - не плюс, т.к. КСС файлы, в том-же ДЛЕ, можно в один сжатый собрать.

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

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

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

0

#14werty1001

  • 2 мая 2013 21:41
  • Регистрация: 17.10.2010
  • ICQ: --
  • Комментариев: 53
По мне 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
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

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

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

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

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

Искать людей

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