[bug] @font-face breaks variable substitution #699

Closed
maluke opened this Issue Mar 10, 2012 · 8 comments

5 participants

@maluke

Input:

.def-font(@name) {
    @font-face {
        font-family: @name
    }
}

.def-font(font-a);
.def-font(font-b);

Output: @font-face{font-family:font-a;}@font-face{font-family:font-a;}

Note the duplicated 'font-a'.

It's the @ in the @font-face that creates the problem.

Unfortunately I not familiar enough with the less.js internals to propose a patch.

@Kalyse

Not really a bug.

You can use,

font-family:~"font-a";

@maluke

Can you show a definition of .def-font that would work correctly?

@Kalyse

Perhaps something like this.

 .def-font(@name: "verdana") {
        @font-face {
            font-family: "@{name}";
        }
    }
@maluke

That doesn't work. Same output as in the bug report. And I did try it before reporting too.

@Kalyse

Confirmed now. I've ran through your provided use cases and it inspite of providing different argument values, it still outputs the first value that is provided to the mixin.

@jimmysawczuk

I also ran into this issue and here's the workaround I'm using:

.font-face(@name, @fn, @p) {
    font-family: '@{name}';
    src: url('@{p}/@{fn}-webfont.eot');
    src: url('@{p}/@{fn}-webfont.eot?#iefix') format('embedded-opentype'),
         url('@{p}/@{fn}-webfont.woff') format('woff'),
         url('@{p}/@{fn}-webfont.ttf') format('truetype'),
         url('@{p}/@{fn}-webfont.svg#@{name}') format('svg');
    font-weight: normal;
    font-style: normal;
}

Then simply wrap that function call in a @font-face block:

@font-face {
    .font-face('Verdana', 'verdana_font', 'fonts');
}

Not ideal, but it seems to work.

@edge07

@jimmysawczuk
I had the exact same problem with @font-face and used your solution. Works perfectly, thanks!

@lukeapage
Less member

If anyone wants to fix this in less.js I fixed it in the dotless port, its quite a simple bug.

dotless/dotless@bb80fe6

@lukeapage lukeapage closed this in 836e805 Aug 12, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment