garter/lesscss.html @ 551e2a3161c7

vex: Update site.
author Steve Losh <steve@stevelosh.com>
date Sat, 20 Aug 2016 15:16:41 +0000
parents 16e948b1a661
children (none)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
    "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
          xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
          xmlns:dc="http://purl.org/dc/elements/1.1/"
          xmlns:foaf="http://xmlns.com/foaf/0.1/">
      
      <head>
        
            
            
                <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
            
            
            <title>
                Garter ยป
                Lesscss
            </title>
            
            
                <!-- YUI CSS reset, fonts, base -->
                <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.0.0/build/cssreset/reset-min.css&amp;3.0.0/build/cssfonts/fonts-min.css&amp;3.0.0/build/cssbase/base-min.css" media="screen, projection" />
                
                <link rel="stylesheet" type="text/css" href="media/css/style.css" media="screen, projection" />
                <link rel="stylesheet" type="text/css" href="media/css/pygments.css" media="screen, projection" />
                <link rel="stylesheet" type="text/css" href="media/css/garter.css" media="screen, projection" />
            
            
            
            
        
    </head>
    
    <body >
        
            
                
                    
  
    <ol id="breadcrumbs">
      
        <li class="crumb-0 not-last">
          
            <a href="./">index</a>
          
        </li>
      
        <li class="crumb-1 last">
          
            lesscss
          
        </li>
      
    </ol> <!-- ol#breadcrumbs -->
  

                
            
            
            <div id="content">
                
                
                
                <h1><a href="">LessCSS Support</a></h1>

<p>If you use <a href="http://lesscss.org/">LessCSS</a> to stay sane while writing CSS, you probably know it
can be a pain to run <code>lessc --watch static/style.less</code> every time you want to
work on your styles. It gets even worse when you have more than one <code>.less</code>
file.</p>
<p>Garter provides a function that will automatically re-render <code>.less</code> files
into CSS before each request if they've changed.</p>
<p><strong>NOTE:</strong> You need to have the LessCSS gem installed for this to work.</p>
<p>You can activate it by calling the <code>lesscss</code> function with your Flask app as a
parameter:</p>
<div class="codehilite"><pre><span class="kn">from</span> <span class="nn">garter.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>


<p>This will watch your app's static media directory and automatically render
<code>.less</code> files into <code>.css</code> 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 <code>.less</code> and <code>.css</code> files on each request. A
simple way to avoid this is wrapping the <code>lesscss</code> call in an <code>if</code> statement:</p>
<div class="codehilite"><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">garter.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>


<p>If you do this <em>you'll</em> be responsible for rendering the <code>.less</code> files into
CSS when you deploy in non-debug mode to your production server.</p>
                
                
                
                
                <hr class="clear" />
            </div>
            
            
                <div id="footer">
                    <p>
                        <a href="http://sjl.bitbucket.org/garter/">Garter</a>
                        was lovingly crafted by
                        <a href="http://stevelosh.com/">Steve Losh</a>.
                        The documentation is powered by
                        <a href="http://markdoc.org/">Markdoc</a>.
                    </p>
                </div>
            
        
        
        <hr class="clear" />
    </body>
</html>