hg.stevelosh.com > docs.stevelosh.com


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Welcome to flask-lesscss’s documentation! &mdash; flask-lesscss v0.9.1 documentation</title>
    <link rel="stylesheet" href="_static/flasky.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '',
        VERSION:     '0.9.1',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <link rel="top" title="flask-lesscss v0.9.1 documentation" href="#" />
  </head>
  <body>


  <div class=indexwrapper>


    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">

  <div class="section" id="welcome-to-flask-lesscss-s-documentation">
<h1>Welcome to flask-lesscss&#8217;s documentation!<a class="headerlink" href="#welcome-to-flask-lesscss-s-documentation" title="Permalink to this headline">¶</a></h1>
<p>If you use <a class="reference external" href="http://lesscss.org/">LessCSS</a> to stay sane while writing CSS, you probably know it can
be a pain to run <tt class="docutils literal"><span class="pre">lessc</span> <span class="pre">--watch</span> <span class="pre">static/style.less</span></tt> every time you want to
work on your styles. It gets even worse when you have more than one <tt class="docutils literal"><span class="pre">.less</span></tt>
file.</p>
<p>flask-lesscss is a small <a class="reference external" href="http://flask.pocoo.org/">Flask</a> extension that will automatically re-render
your <tt class="docutils literal"><span class="pre">.less</span></tt> files into CSS before each request if they&#8217;ve changed.</p>
<p><strong>NOTE:</strong> You need to have the LessCSS gem installed for this to work.</p>
<div class="section" id="installation">
<h2>Installation<a class="headerlink" href="#installation" title="Permalink to this headline">¶</a></h2>
<p>Install flask-lesscss with <a class="reference external" href="http://pip.openplans.org/">pip</a>:</p>
<div class="highlight-python"><pre>pip install -e 'hg+http://bitbucket.org/sjl/flask-lesscss@v0.9.1#egg=flask-lesscss'</pre>
</div>
<p>Prefer <a class="reference external" href="http://git-scm.com/">git</a> to <a class="reference external" href="http://hg-scm.org/">Mercurial</a>?</p>
<div class="highlight-python"><pre>pip install -e 'git+http://github.com/sjl/flask-lesscss.git@v0.9.1#egg=flask-lesscss'</pre>
</div>
</div>
<div class="section" id="usage">
<h2>Usage<a class="headerlink" href="#usage" title="Permalink to this headline">¶</a></h2>
<p>You can activate it by calling the <tt class="docutils literal"><span class="pre">lesscss</span></tt> function with your Flask app as
a parameter:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">flaskext.lesscss</span> <span class="kn">import</span> <span class="n">lesscss</span>
<span class="n">lesscss</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
</pre></div>
</div>
<p>This will watch your app&#8217;s static media directory and automatically render
<tt class="docutils literal"><span class="pre">.less</span></tt> files into <tt class="docutils literal"><span class="pre">.css</span></tt> files in the same (sub)directory.</p>
<p>When you deploy your app you might not want to accept the overhead of checking
the modification time of your <tt class="docutils literal"><span class="pre">.less</span></tt> and <tt class="docutils literal"><span class="pre">.css</span></tt> files on each request.
A simple way to avoid this is wrapping the <tt class="docutils literal"><span class="pre">lesscss</span></tt> call in an <tt class="docutils literal"><span class="pre">if</span></tt>
statement:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="k">if</span> <span class="n">app</span><span class="o">.</span><span class="n">debug</span><span class="p">:</span>
    <span class="kn">from</span> <span class="nn">flaskext.lesscss</span> <span class="kn">import</span> <span class="n">lesscss</span>
    <span class="n">lesscss</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
</pre></div>
</div>
<p>If you do this <em>you&#8217;ll</em> be responsible for rendering the <tt class="docutils literal"><span class="pre">.less</span></tt> files into
CSS when you deploy in non-debug mode to your production server.</p>
</div>
<div class="section" id="contribute">
<h2>Contribute<a class="headerlink" href="#contribute" title="Permalink to this headline">¶</a></h2>
<p>If you want to contribute feel free to fork the <a class="reference external" href="http://bitbucket.org/sjl/flask-lesscss/">Mercurial repository</a> or <a class="reference external" href="http://github.com/sjl/flask-lesscss/">git
repository</a> and send a pull request.</p>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>

    <div class="footer">Created by <a href="http://stevelosh.com/">Steve Losh</a></p>

        </div>


  </body>
</html>
author	Steve Losh <steve@stevelosh.com>
date	Thu, 06 Apr 2017 20:08:05 +0000
parents	c5fa0813625e
children	(none)