CODEWITHSUNDEEP
javascriptcssresponsive-designless
m33bo
m33bo

Reputation: 1354

adaptive.js & LESS CSS compatibility issue

I am having an issue with adaptive.js and its compatibility with LESS. Problem being is that you cannot specify the type of document in the head because you have to include it via js. 

<script>
    // Edit to suit your needs.
    var ADAPT_CONFIG = {
        // Where is your CSS?
        path: 'css/responsive/',

        // false = Only run once, when page first loads.
        // true = Change on window resize and page tilt.
        dynamic: true,

        // First range entry is the minimum.
        // Last range entry is the maximum.
        // Separate ranges by "to" keyword.
        range: [
            '0px    to 760px  = mobile.min.css',
            '760px  to 980px  = 720.min.css',
            '980px  to 3000px = 960.min.css',
        ]
    };
</script>

My question is that is there a way to be able to tell the adaptive.js that the files should be served up as less files so:

<script type="text/less">

rather than just:

<script type="text/stylesheet">

Or do I have to serve up the CSS server side prior to the adaptive.js taking effect?

Any help would be great.

Upvotes: 2

Views: 245

Answers (1)

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

Modify adaptive.js by changing

css.rel = 'stylesheet';

to be

css.rel = 'stylesheet/less';

The final code should look like this:

var css = d.createElement('link');
css.rel = 'stylesheet/less';
css.media = 'screen';

Please note that you still need to reinitialize less.js again.

UPDATE

I didn't know how to reinitialize less before but it looks like version 1.0.31 has a method: less.refreshStyles() which will re-compile tags with type="text/less"

On your config add

callback: less.refreshStyles(),

Upvotes: 1

Related Questions