Skip to content

@declare: importing a less file without outputing #1353

Closed
@ChrisCinelli

Description

@ChrisCinelli

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:

  1. 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.
  2. Each page has only global.less file that has include to page1.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.
  3. You give up reusing the mixins, the variables, etc in global.less and you have two LESS files for each page: global.less and pageSpecific.less. This does not work for me.
  4. 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 and pageSpecific.less. pageSpecific.less will have @declare 'global.less'.The result will be that pageSpecific.less will be able to use the mixins and the variables in global.less but the output of the compilation of pageSpecific.less will not include the CSS rules already compiled in global.less. In this way we will have the optimal use of bandwidth and quick transfers.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions