Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you use javascript variables when writing inline CSS styles in a Jade template

Tags:

css

node.js

pug

I'm trying to dynamically insert snippets of CSS. Ideally, this would work:

style(type='text/css')
    #header a#logo { background:url(constants.logo) no-repeat; }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
        #header a#logo { background-image: url(constants.logo_2x); }
    }

Unfortunately, constants.logo is /literally/ placed in the DOM. What does work is the following:

!= "<style type='text/css'>"
!= "#header a#logo { background:url('"+constants.logo+"') no-repeat; }"
!= "@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {"
!= "    #header a#logo { background-image: url('"+constants.logo_2x+"'); }"
!= "}</style>"

Is there a better way?

like image 432
johnny Avatar asked Jan 11 '12 05:01

johnny


1 Answers

Use #{variable} to print a variable within an element's text.

like image 111
fent Avatar answered Sep 19 '22 18:09

fent