Поиск по этому блогу

вторник, 22 марта 2016 г.

Что делает less.js в twitter bootsrap - компилирует все в css... может ли быть хуже?

Начинать надо с самых простых вариантов компиляции less --> css. Потому я вспомнил про less.js in the browser, опробовал этот вариант на экспорте bootstrap из Pingendo (он офрмирует сразу оба варианта: less и css). Оказалось, что результирующий код сss тупо записывается в заголовок html-файла.
Очевидно, что такой же компилятор в Atom должен работать куда быстрее. Установил несколько плагинов less, здесь описаны толко два (компилятора). В сочетании с плагином сервера (atom-live-server) все должно работать замечательно...

less.js in the browser Using less.js in the browser is great for development, but it's not recommended for production
less-autocompile package - Плагин компилирует css из less каждый раз после сохранения файла (Ctrl+S)
less-compiler package

Оригинально..., но уже вышло из моды

In [ ]:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>
In [ ]:
####Auto compile LESS file on save.
In [ ]:
Add the parameters on the first line of the LESS file.

out (string):  path of CSS file to create
sourcemap (bool): create sourcemap file
compress (bool): compress CSS file
main (string): path to your main LESS file to be compiled

Example: insert first row into main lessfile less/styles.less

In [ ]:
// out: ../css/styles.css, sourcemap: true, compress: true 
 
@import "my/components/select.less";

and in component lessfile less/my/components/select.less we have to insert this first row:

In [ ]:
// main: ../../styles.less 
 
.select {
  height: 100px;
  width: 100px;
}

Это что же получается. Для каждого файла, который импортируется в main нужно добавлять строчку в начало файла? Такой хоккей нам не нужен. Ниже вариант более простой:

This is a fork from lohek less-autocompile all credits for him to the great idea well im only doing some modifications for get a better performance and some functionality that i needed.

Auto compile LESS file on save.

Add the parameters on the first line of the LESS file.

In [ ]:
out (string):  path of CSS file to create
compress (bool): compress CSS file
main (string): path to your main LESS file to be compiled
In [ ]:
#examples
// out: ../styles.css
// out: ../styles.css, compress: true
// main: init.less
In [ ]:
#Ps: if u have more than one main file u can do this

// main: one.less|two.less|another.less


Посты чуть ниже также могут вас заинтересовать

Комментариев нет: