Simplify reuse of less files in customer build

[capricube]

Is there a way to change and simplify the less files so custom builds can reuse them more easily? The only documented way for custom builds is to get the project and create new themes. and reuse the existing gulp build.

In my case i have other less files in my project which i want to combine with the semantic-ui files to optimize my css.

can someone point me to some possible solutions?

[jlukic]

There may be a way to do this shortly. Gulp tasks will be able to be imported into other gulpfile in the next release.

Directly @importing components other LESS files relies on less/less.js#2442

[capricube]

thanks for your response. the scope proposal definitely looks promising.

Wouldn't "import (optional)" be an alternative/workaround (http://lesscss.org/features/#import-options-optional) ? if the file does not exist compilation will continue. then one could linearize the build by importing the variable declarations at the top of a master less file.

[jlukic]

Themes use variables to specify paths for each component import in theme.less using @element. This currently will be set to the the last imported component since this variable is declared in each file with the same variable name and variable assignments are hoisted.

Many components also use identical variables that expect to be set per-component, for example things like @padding, @fontFace etc. that have the same issue with assignment hoisting.

[capricube]

ok. i'll close this issue then. will try to find another way to combine the less files. 😃

[jlukic]

There is a workaround until a better solution is found

This is from Moss Doerksen on our Google Group

.reset()        { @import 'semantic-ui/definitions/globals/reset.less'; }
.site()         { @import 'semantic-ui/definitions/globals/site.less'; }


/* Elements */


.button()       { @import 'semantic-ui/definitions/elements/button.less'; }
.divider()      { @import 'semantic-ui/definitions/elements/divider.less'; }
.flag()         { @import 'semantic-ui/definitions/elements/flag.less'; }
.header()       { @import 'semantic-ui/definitions/elements/header.less'; }
.icon()         { @import 'semantic-ui/definitions/elements/icon.less'; }
.image()        { @import 'semantic-ui/definitions/elements/image.less'; }
.input()        { @import 'semantic-ui/definitions/elements/input.less'; }
.label()        { @import 'semantic-ui/definitions/elements/label.less'; }
.list()         { @import 'semantic-ui/definitions/elements/list.less'; }
.loader()       { @import 'semantic-ui/definitions/elements/loader.less'; }
.rail()         { @import 'semantic-ui/definitions/elements/rail.less'; }
.reveal()       { @import 'semantic-ui/definitions/elements/reveal.less'; }
.segment()      { @import 'semantic-ui/definitions/elements/segment.less'; }
.step()         { @import 'semantic-ui/definitions/elements/step.less'; }


/* Collections */


.breadcrumb()   { @import 'semantic-ui/definitions/collections/breadcrumb.less'; }
.form()         { @import 'semantic-ui/definitions/collections/form.less'; }
.grid()         { @import 'semantic-ui/definitions/collections/grid.less'; }
.menu()         { @import 'semantic-ui/definitions/collections/menu.less'; }
.message()      { @import 'semantic-ui/definitions/collections/message.less'; }
.table()        { @import 'semantic-ui/definitions/collections/table.less'; }


/* Modules */


.accordion()    { @import 'semantic-ui/definitions/modules/accordion.less'; }
.checkbox()     { @import 'semantic-ui/definitions/modules/checkbox.less'; }
.dimmer()       { @import 'semantic-ui/definitions/modules/dimmer.less'; }
.dropdown()     { @import 'semantic-ui/definitions/modules/dropdown.less'; }
.modal()        { @import 'semantic-ui/definitions/modules/modal.less'; }
.nag()          { @import 'semantic-ui/definitions/modules/nag.less'; }
.popup()        { @import 'semantic-ui/definitions/modules/popup.less'; }
.progress()     { @import 'semantic-ui/definitions/modules/progress.less'; }
.rating()       { @import 'semantic-ui/definitions/modules/rating.less'; }
.search()       { @import 'semantic-ui/definitions/modules/search.less'; }
.shape()        { @import 'semantic-ui/definitions/modules/shape.less'; }
.sidebar()      { @import 'semantic-ui/definitions/modules/sidebar.less'; }
.sticky()       { @import 'semantic-ui/definitions/modules/sticky.less'; }
.tab()          { @import 'semantic-ui/definitions/modules/tab.less'; }
.transition()   { @import 'semantic-ui/definitions/modules/transition.less'; }
.video()        { @import 'semantic-ui/definitions/modules/video.less'; }


/* Views */


.ad()           { @import 'semantic-ui/definitions/views/ad.less'; }
.card()         { @import 'semantic-ui/definitions/views/card.less'; }
.comment()      { @import 'semantic-ui/definitions/views/comment.less'; }
.feed()         { @import 'semantic-ui/definitions/views/feed.less'; }
.item()         { @import 'semantic-ui/definitions/views/item.less'; }
.statistic()    { @import 'semantic-ui/definitions/views/statistic.less'; }






.reset();
.site();
.button();
.divider();
.flag();
.header();
.icon();
.image();
.input();
.label();
.list();
.loader();
.rail();
.reveal();
.segment();
.step();
.breadcrumb();
.form();
.grid();
.menu();
.message();
.table();
.accordion();
.checkbox();
.dimmer();
.dropdown();
.modal();
.nag();
.popup();
.progress();
.rating();
.search();
.shape();
.sidebar();
.sticky();
.tab();
.transition();
.video();
.ad();
.card();
.comment();
.feed();
.item();
.statistic();