<li><p><aclass="github-button"href="https://github.com/chaos-bodensee/lektor-scss"data-icon="octicon-star"data-size="large"data-show-count="true"aria-label="Star lektor-scss on GitHub"target="_blank">Star</a></p></li>
<li>It looks for <code>.scss</code> and <code>.sass</code> files <em>(ignores part files that begin with a underscore e.g. '_testfile.scss') and compiles them as part of the build process.</em></li>
<li>It only rebuilds the css when it's needed (file changed, a file it imports changed or the config changed).</li>
<li>When starting the the development server it watches the files for changes in the background and rebuilds them when needed.</li>
</ul>
<h2>Installation</h2>
<p>You can install the plugin with Lektor's installer:</p>
<spanclass="c1"># edit site with new generated css</span>
lektor server -f scss
</pre>
<h2>Python3</h2>
<p>It is highly recommended to use this plugin with a python3 version of lektor.</p>
<p>Since lektor can be used as a python module it is possible to enforce this <em>(after lektor is installed eg. with <code>pip3 install --user --upgrade lektor</code>)</em> with the following command:</p>
<p>The Plugin has the following settings you can adjust to your needs:</p>
<table>
<thead>
<tr>
<th>parameter</th>
<th>default value</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>source_dir</td>
<td>assets/scss/</td>
<td>the directory in which the plugin searchs for sass files (subdirectories are included)</td>
</tr>
<tr>
<td>output_dir</td>
<td>assets/css/</td>
<td>the directory the compiled css files get place at</td>
</tr>
<tr>
<td>output_style</td>
<td>compressed</td>
<td>coding style of the compiled result. choose one of: 'nested', 'expanded', 'compact', 'compressed'</td>
</tr>
<tr>
<td>source_comments</td>
<td>False</td>
<td>whether to add comments about source lines</td>
</tr>
<tr>
<td>precision</td>
<td>5</td>
<td>precision for numbers</td>
</tr>
<tr>
<td>include_paths</td>
<td></td>
<td>If you want to include SASS libraries from a different directory, libsass's compile function has a parameter called <code>include_paths</code> to add those directories to the search path.</td>
</tr>
</tbody>
</table>
<p>An example file with the default config can be found at <code>configs/scss.ini</code>. For every parameter that is not specified in the config file the default value is used by the plugin.</p>
<h2>Development</h2>
<p>To test and/or develop on this plugin in your running lektor installation, simply place it in the <code>packages/</code> Folder and have a look at the <ahref="https://www.getlektor.com/docs/plugins/dev/"rel="nofollow">Lektor Doku</a></p>
Please enable JavaScript to view the <ahref="https://disqus.com/?ref_noscript"
rel="nofollow">comments powered by Disqus.</a>
</noscript>
</div>
</div>
</div>
</div>
</div>
</div>
<divclass="bottomsummary">
<divclass="container">
</div>
</div>
<footer>
<divclass="container">
<divclass="row">
<divclass="col-sm-4 icon-bar">
<ahref="https://github.com/lektor/lektor/"title="Lektor on GitHub"
><iclass="fa fa-github"></i></a>
<ahref="https://github.com/lektor/lektor/issues/"title="Report Issues for Lektor"
><iclass="fa fa-bug"></i></a>
<ahref="https://twitter.com/getlektor"title="Find Lektor on Twitter"
><iclass="fa fa-twitter"></i></a>
<ahref="https://gitter.im/lektor/lektor"title="Chat on Gitter"
><iclass="fa fa-comment"></i></a>
<ahref="https://github.com/lektor/lektor-website/tree/master/content/plugins/lektor-scss/contents.lr"title="View source for this page"><iclass="fa fa-code"></i></a>
</div>
<divclass="col-sm-8">
<ahref="../../license/">License & Copyright</a> •
<ahref="../../contact/">Contact</a> •
Made with <iclass="fa fa-fw fa-heart"title="Heart"><spanhidden>Heart</span></i> in Carinthia
