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&3.0.0/build/cssfonts/fonts-min.css&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>