Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
maluke opened this Issue · 8 comments

5 participants

Sergey Schetinin Chris Jimmy Sawczuk edge07 Luke Page
Sergey Schetinin

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.

Chris

Not really a bug.

You can use,

font-family:~"font-a";

Sergey Schetinin

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

Chris

Perhaps something like this.

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

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

Chris

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.

Jimmy Sawczuk

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!

Luke Page
Owner

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

dotless/dotless@bb80fe6

Luke Page lukeapage closed this in 836e805
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.