

In [10]:

    
from IPython.display import HTML, display, clear_output
import uuid

import jinja2
from jinja2 import Template


LESS_URL = "https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less"


div_id = 'i' + str(uuid.uuid4())

JS = u"""
<script type="text/javascript">

    // load css if it's not already there: http://stackoverflow.com/a/4724676/7782
    function loadcss(url) {
        if (!$("link[href='" + url + "']").length)
            $('<link href="' + url + '" rel="stylesheet">').appendTo("head");
    }

    require.config({
      paths: {
        less: "{{less_url}}"
      }
    });

     
    require(["less"], function(less) {
    
        less_text = '#header {\
          color: black;\
          .navigation {\
            font-size: 12px;\
          }\
          .logo {\
            width: 300px;\
          }\
        }';
        
        less.render(less_text, function (e, output) {
          console.log(output.css);
        });
    
    });

</script>
"""

# demonstrates interference from .rendered_html CSS

CSS = """
<style type="text/css">
    #{{div_id}} { }
</style>
"""

HTML_ = """
<div id="{{div_id}}">
  <span>hello</span>
</div>
"""

template = Template(CSS + JS + HTML_)
HTML(template.render(div_id = div_id,
                     less_url=LESS_URL
                      ))









    Out[10]:










  hello

Python less library

lesscpy/lesscpy



In [14]:

    
css = u"""
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
"""



In [18]:

    
import lesscpy
from six import StringIO

print(lesscpy.compile(StringIO(css), minify=True))









    



#header{color:black;}
#header .navigation{font-size:12px;}
#header .logo{width:300px;}



In [ ]: