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

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

Projects

None yet

5 participants

@maluke
maluke commented Mar 10, 2012

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
Kalyse commented Mar 13, 2012

Not really a bug.

You can use,

font-family:~"font-a";

@maluke
maluke commented Mar 13, 2012

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

@Kalyse
Kalyse commented Mar 13, 2012

Perhaps something like this.

 .def-font(@name: "verdana") {
        @font-face {
            font-family: "@{name}";
        }
    }
@maluke
maluke commented Mar 13, 2012

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

@Kalyse
Kalyse commented Mar 13, 2012

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
edge07 commented Apr 18, 2012

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

@lukeapage
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