Import mixins only for evaluation

Igor Kononuchenko's Avatar

Igor Kononuchenko

08 Jul, 2010 06:02 PM

I have file util.less with such code:
.font12px {font-size:1.2em;} .font14px {font-size:1.4em;} ...

I import this file to another files for evaluating the rules. But less.app includes util rules to every file and creates lots of duplication.
How to import mixins only for evaluation?

  1. 1 Posted by nicholas.jakobs... on 08 Jul, 2010 08:31 PM

    nicholas.jakobsen's Avatar

    I expected the same thing. I have a file called helpers.less and I want to use variables and mixins from this helper in my other .less files. I dont want the mixin rules from this file to appear as separate css declarations in every file I @import it into.

  2. 2 Posted by Adam DiCarlo on 21 Sep, 2010 12:51 AM

    Adam DiCarlo's Avatar

    AH HA! There IS a way to do this!

    In your "library" less file (utils.less, for OP), declare your mixins with the $ prefix, instead of . or #.

    $abstractMixin { color: red; }

    Then, in the file that imports the library:
    .myclass { $abstractMixin; }

    SWEET!

  3. 3 Posted by nicholas.jakobs... on 21 Sep, 2010 12:59 AM

    nicholas.jakobsen's Avatar

    Nice find, I'll try it out.

  4. 4 Posted by nicholas.jakobs... on 21 Sep, 2010 01:16 AM

    nicholas.jakobsen's Avatar

    Doesn't seem to work with less.js. My less files no longer compile using the $

  5. 5 Posted by huxia on 26 Sep, 2010 09:00 AM

    huxia's Avatar

    I have the same problem and Adam's solution doesn't work for me either.

    To be more detailed:
    Currently, my project's less file structure is like:

    default.less
    default.fonts.less
    default.module1.less
    default.module2.less
    default.module3.less
    ...

    all the 3 module require the font definition in default.fonts.less.
    and I want to only do @import to the font definition at default.less, and when default.less then @import module less file, it should find the definition imported previously.

    however, currently less version doesn't work this way.
    and I need to do @import in every .less file that need any font definition.
    and the final .css file generated contains a lot of duplications.

    it will be good if the less author can consider this in the vnext.

    thanks

  6. 6 Posted by Sam Hill on 25 Oct, 2010 06:30 PM

    Sam Hill's Avatar

    I have the same issue as huxia has described.

  7. 7 Posted by Adam DiCarlo on 25 Oct, 2010 06:43 PM

    Adam DiCarlo's Avatar

    I'm using the PHP implementation of LESS. I discovered the $ prefix for mixins simply by digging through its source code, so it might be an extra (undocumented) feature that was only implemented in the PHP version.

    It's an excellent feature, though, pretty much critical to LESS, so I think it should be part of core LESS.

  8. 8 Posted by nicholas.jakobs... on 25 Oct, 2010 10:45 PM

    nicholas.jakobsen's Avatar

    The workaround I've come to use is to define your mixin helpers as functions instead of classes. The notation to call the function is the same as mixing in a class, only the function does not get included in the css file. If you're having the issue of the js parser blowing up because the file is empty, include a /**/ comment in the file so it has something to output. There is a fork of the code that fixes that empty file concat error, but it hasn't yet been pulled into the master branch.

  9. 9 Posted by Adam DiCarlo on 29 Oct, 2010 01:43 PM

    Adam DiCarlo's Avatar

    Nicholas, what's the syntax to define a mixin as a function instead of a class?

  10. 10 Posted by ben on 06 Jan, 2011 01:23 PM

    ben's Avatar

    I tried using the $ but it didn't work.

    Instead, define your mixins like this:

    .abstractMixin() { color: red; }

    (just add the parenthesis) and it will work in the same way but not be included. I guess all mixins should be defined like this. Just shaved a big chunk out of my CSS file!

  11. 11 Posted by nicholas.jakobs... on 06 Jan, 2011 07:04 PM

    nicholas.jakobsen's Avatar

    Sorry Adam, I didn't see your reply, Ben has the right syntax. However, I have begun noticing duplicate css rules being inserted when using this system. Unfortunately it seems this project has been abandoned. I might be switching to the new SASS which has LESS-like syntax, but is being actively developed.

  12. 12 Posted by ben on 04 Mar, 2011 05:41 PM

    ben's Avatar

    yes nicholas i see what you mean. i have one file to process all my other files (all.less - which imports all my other less files). Because this contains multiple references to my mixins I now get each mixin repeated for every import, which makes the file size massive.

    I'll try and think of a work around...

  13. 13 Posted by Igor Kononuchen... on 04 Mar, 2011 05:49 PM

    Igor Kononuchenko's Avatar

    I switched to http://learnboost.github.com/stylus/ - very powerful thing

  14. 14 Posted by Brandon Holtscl... on 03 Jan, 2012 05:39 AM

    Brandon Holtsclaw's Avatar

    just do it like the docs says

    .mymixin() { font-size: 200px; }

    note the ()

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac