[SalesForce] Visualforce binding in css of Static resource

Can we have visualforce bindings inside static resource CSS, i need certain params to be dynamic and do not want to have the Big length of CSS in my VF code, instead i am hoping i can use the visualforce bindings directly in my css static resource file like below

<apex:stylesheet value="{!URLFOR($Resource.Test, 'Asset/bootstrap.min.css')}" />

This is inside static resource

.header-navbar-dark #header-navbar {
      background-color: **{!oSitesetting.sHeadercolor}**;
      -webkit-box-shadow: none;
       box-shadow: none 
 }

Net result during output when i check the chrome console is that my visualforce bindings are not accounted and the background-color attribute above is escaped, is there any syntax i am missing?

Best Answer

You can't do that with Static Resources but you can achieve dynamic CSS binding with a Visualforce page as external CSS file.

Visualforce page (apex:page) has a content type (contentType) property where you can specify the content type of the file. That means you can render a Visualforce page in different MIME types like JavaScript HTML and CSS etc.

To do that you have to use text/css as contentType of the Visualforce page as below.

Visualforce as external CSS file

<apex:page controller="CssController" contentType="text/css" cache="false" expires="0">
    .classgreen{
        color:{!testColor}
    }
</apex:page>

Visualforce Page where the above file is referenced as CSS file

<apex:page>
  <apex:stylesheet value="{!URLFOR($Page.csspage)}"  />
  <h1 class="classgreen">Congratulations</h1>
  This is your new Page
  <!-- End Default Content REMOVE THIS -->
</apex:page>
Related Topic