Closed
Description
Use case:
- You have an app that has 100 pages
- You have some LESS that is common to all pages (ex: mixins, colors variable, Twitter bootstrap etc).
- Each page has its own specific LESS styles.
How do you make sure that everything works as expected?
I have 4 choices:
- Each page has a
pageSpecific.less
that has a@import 'global.less'
. The cons are:- Each page will have to load a different .css file and and each of these .css files will have big chuck of CSS rules that are in common with each others. Result: the first time the user access a page they have to wait until a relative big .CSS is loaded where the most part of this files has been already shipped in previous pages. So we waste bandwidth and time to load what we have already shipped.
- Each page has only
global.less
file that has include topage1.less
,page2.less
, ... ,page100.less
.- In this case the file is HUGE. It need to be loaded the first time slowing down a lot the page load.
- It has a lot of rules that are not relevant to the specific page, each page content needs to be scoped to the page and if somebody forgets to do it, they can alter other pages styles.
- When somebody changes just one CSS rule in one file, the whole file need to be shipped again so if you release often there is no advantage in using static assets caching and having a even bigger waste of bandwidth and time.
- You give up reusing the mixins, the variables, etc in
global.less
and you have two LESS files for each page:global.less
andpageSpecific.less
. This does not work for me. - This does not exist yet and it is what I am suggesting to implement. If we could have a
@declare
directive, we could have two files in the page:global.less
andpageSpecific.less
.pageSpecific.less
will have@declare 'global.less'
.The result will be thatpageSpecific.less
will be able to use the mixins and the variables inglobal.less
but the output of the compilation ofpageSpecific.less
will not include the CSS rules already compiled inglobal.less
. In this way we will have the optimal use of bandwidth and quick transfers.
Metadata
Metadata
Assignees
Labels
No labels