README.html

<?xml version="1.0" encoding="utf-8" ?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.11: http://docutils.sourceforge.net/" />
<title>isass</title>
<style type="text/css">

/*
:Author: David Goodger (goodger@python.org)
:Id: $Id: html4css1.css 7614 2013-02-21 15:55:51Z milde $
:Copyright: This stylesheet has been placed in the public domain.

Default cascading style sheet for the HTML output of Docutils.

See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
customize this style sheet.
*/

/* used to remove borders from tables and images */
.borderless, table.borderless td, table.borderless th {
  border: 0 }

table.borderless td, table.borderless th {
  /* Override padding for "table.docutils td" with "! important".
     The right padding separates the table cells. */
  padding: 0 0.5em 0 0 ! important }

.first {
  /* Override more specific margin styles with "! important". */
  margin-top: 0 ! important }

.last, .with-subtitle {
  margin-bottom: 0 ! important }

.hidden {
  display: none }

a.toc-backref {
  text-decoration: none ;
  color: black }

blockquote.epigraph {
  margin: 2em 5em ; }

dl.docutils dd {
  margin-bottom: 0.5em }

object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
  overflow: hidden;
}

/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
  font-weight: bold }
*/

div.abstract {
  margin: 2em 5em }

div.abstract p.topic-title {
  font-weight: bold ;
  text-align: center }

div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning {
  margin: 2em ;
  border: medium outset ;
  padding: 1em }

div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title {
  font-weight: bold ;
  font-family: sans-serif }

div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title, .code .error {
  color: red ;
  font-weight: bold ;
  font-family: sans-serif }

/* Uncomment (and remove this text!) to get reduced vertical space in
   compound paragraphs.
div.compound .compound-first, div.compound .compound-middle {
  margin-bottom: 0.5em }

div.compound .compound-last, div.compound .compound-middle {
  margin-top: 0.5em }
*/

div.dedication {
  margin: 2em 5em ;
  text-align: center ;
  font-style: italic }

div.dedication p.topic-title {
  font-weight: bold ;
  font-style: normal }

div.figure {
  margin-left: 2em ;
  margin-right: 2em }

div.footer, div.header {
  clear: both;
  font-size: smaller }

div.line-block {
  display: block ;
  margin-top: 1em ;
  margin-bottom: 1em }

div.line-block div.line-block {
  margin-top: 0 ;
  margin-bottom: 0 ;
  margin-left: 1.5em }

div.sidebar {
  margin: 0 0 0.5em 1em ;
  border: medium outset ;
  padding: 1em ;
  background-color: #ffffee ;
  width: 40% ;
  float: right ;
  clear: right }

div.sidebar p.rubric {
  font-family: sans-serif ;
  font-size: medium }

div.system-messages {
  margin: 5em }

div.system-messages h1 {
  color: red }

div.system-message {
  border: medium outset ;
  padding: 1em }

div.system-message p.system-message-title {
  color: red ;
  font-weight: bold }

div.topic {
  margin: 2em }

h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
  margin-top: 0.4em }

h1.title {
  text-align: center }

h2.subtitle {
  text-align: center }

hr.docutils {
  width: 75% }

img.align-left, .figure.align-left, object.align-left {
  clear: left ;
  float: left ;
  margin-right: 1em }

img.align-right, .figure.align-right, object.align-right {
  clear: right ;
  float: right ;
  margin-left: 1em }

img.align-center, .figure.align-center, object.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.align-left {
  text-align: left }

.align-center {
  clear: both ;
  text-align: center }

.align-right {
  text-align: right }

/* reset inner alignment in figures */
div.align-right {
  text-align: inherit }

/* div.align-center * { */
/*   text-align: left } */

ol.simple, ul.simple {
  margin-bottom: 1em }

ol.arabic {
  list-style: decimal }

ol.loweralpha {
  list-style: lower-alpha }

ol.upperalpha {
  list-style: upper-alpha }

ol.lowerroman {
  list-style: lower-roman }

ol.upperroman {
  list-style: upper-roman }

p.attribution {
  text-align: right ;
  margin-left: 50% }

p.caption {
  font-style: italic }

p.credits {
  font-style: italic ;
  font-size: smaller }

p.label {
  white-space: nowrap }

p.rubric {
  font-weight: bold ;
  font-size: larger ;
  color: maroon ;
  text-align: center }

p.sidebar-title {
  font-family: sans-serif ;
  font-weight: bold ;
  font-size: larger }

p.sidebar-subtitle {
  font-family: sans-serif ;
  font-weight: bold }

p.topic-title {
  font-weight: bold }

pre.address {
  margin-bottom: 0 ;
  margin-top: 0 ;
  font: inherit }

pre.literal-block, pre.doctest-block, pre.math, pre.code {
  margin-left: 2em ;
  margin-right: 2em }

pre.code .ln { color: grey; } /* line numbers */
pre.code, code { background-color: #eeeeee }
pre.code .comment, code .comment { color: #5C6576 }
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
pre.code .literal.string, code .literal.string { color: #0C5404 }
pre.code .name.builtin, code .name.builtin { color: #352B84 }
pre.code .deleted, code .deleted { background-color: #DEB0A1}
pre.code .inserted, code .inserted { background-color: #A3D289}

span.classifier {
  font-family: sans-serif ;
  font-style: oblique }

span.classifier-delimiter {
  font-family: sans-serif ;
  font-weight: bold }

span.interpreted {
  font-family: sans-serif }

span.option {
  white-space: nowrap }

span.pre {
  white-space: pre }

span.problematic {
  color: red }

span.section-subtitle {
  /* font-size relative to parent (h1..h6 element) */
  font-size: 80% }

table.citation {
  border-left: solid 1px gray;
  margin-left: 1px }

table.docinfo {
  margin: 2em 4em }

table.docutils {
  margin-top: 0.5em ;
  margin-bottom: 0.5em }

table.footnote {
  border-left: solid 1px black;
  margin-left: 1px }

table.docutils td, table.docutils th,
table.docinfo td, table.docinfo th {
  padding-left: 0.5em ;
  padding-right: 0.5em ;
  vertical-align: top }

table.docutils th.field-name, table.docinfo th.docinfo-name {
  font-weight: bold ;
  text-align: left ;
  white-space: nowrap ;
  padding-left: 0 }

/* "booktabs" style (no vertical lines) */
table.docutils.booktabs {
  border: 0px;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-collapse: collapse;
}
table.docutils.booktabs * {
  border: 0px;
}
table.docutils.booktabs th {
  border-bottom: thin solid;
  text-align: left;
}

h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
  font-size: 100% }

ul.auto-toc {
  list-style-type: none }

</style>
</head>
<body>
<div class="document" id="isass">
<h1 class="title">isass</h1>

<p><strong>isass</strong> (Indented SASS) compiles
<a class="reference external" href="http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html">SASS-indented-syntax</a>
into CSS or SCSS.</p>
<pre class="literal-block">
import isass

sass = '''
body
  width: 500px
'''

print isass.get_css(sass)
print isass.get_scss(sass)
</pre>
<p><strong>isass</strong> uses <a class="reference external" href="https://github.com/Kronuz/pyScss">pyScss</a> as its
internal compiler, to compile <em>scss</em> to <em>css</em>. So <strong>isass</strong> is a <em>sass</em>
to <em>scss</em> convertor, including:</p>
<ul class="simple">
<li><a class="reference external" href="#syntax-reference">All</a> pyScss
<a class="reference external" href="https://github.com/Kronuz/pyScss#features">features</a> are
supported</li>
<li>A <a class="reference external" href="#command-line-interface">**Command Line Interface**</a></li>
<li>A <a class="reference external" href="#watchdog">**Watchdog**</a> to automatically reproduce output.css
when one or more source files are changed.</li>
</ul>
<div class="section" id="installation">
<h1>Installation</h1>
<p>Latest stable version:</p>
<pre class="literal-block">
$ pip install isass
# or
$ easy_install isass
</pre>
<p>Development version:</p>
<pre class="literal-block">
pip install git+git&#64;github.com:pylover/isass.git
</pre>
<p>From source:</p>
<pre class="literal-block">
$ cd source_dir
$ python setup.py install
</pre>
</div>
<div class="section" id="syntax-reference">
<h1>Syntax Reference</h1>
<div class="section" id="line-extensions">
<h2>Line extensions</h2>
<p>Lines ending with <tt class="docutils literal">,</tt> will be continued to the next line:</p>
<pre class="literal-block">
#container, #article_container, #sidebar_container,
#footer_container, #useless_container
  background-color: #DDD
</pre>
<p>That first line is treated is one whole line:</p>
<pre class="literal-block">
#container, #article_container, #sidebar_container #footer_container, #useless_container {
  background-color: #DDD; }
</pre>
</div>
<div class="section" id="comments">
<h2>Comments</h2>
<p>Comments are prefaced with <tt class="docutils literal">/*</tt> and is implemented on a per-line
basis:</p>
<pre class="literal-block">
/* This is a comment
/* This is another comment
body
  /* Yep, a short width
  width: 50px
</pre>
<p>Will give:</p>
<pre class="literal-block">
/* This is a comment */
/* This is another comment */
body {
  /* Yep, a short width */
  width: 50px; }
</pre>
</div>
<div class="section" id="imports">
<h2>Imports</h2>
<p>A handy little command is <tt class="docutils literal">&#64;import</tt> that - surprise surprise - imports
an external <tt class="docutils literal">.sass</tt> file into the current <tt class="docutils literal">.sass</tt> file.</p>
<p>So let's say you have a <tt class="docutils literal">night.sass</tt>:</p>
<pre class="literal-block">
body
  background-color: black
  color: white
</pre>
<p>Then in your file <tt class="docutils literal">style.sass</tt>:</p>
<pre class="literal-block">
&#64;import night.sass

#sunny-message
   background-color: white
   color: yellow
</pre>
<p>Which produces:</p>
<pre class="literal-block">
body {
  background-color: #000000;
  color: #ffffff;
}
#sunny-message {
  background-color: #ffffff;
  color: #ffff00;
}
</pre>
<p><tt class="docutils literal">isass</tt> looks for the filenames relative to the current working
directory. Please don't abuse the imports, it doesn't check for circular
imports - that would be your bad.</p>
<p>But of course you want to take advantage of the programmatic syntax
extensions introduced by SASS. This will require that you pre-install
the <tt class="docutils literal">PySCSS</tt> module, and the compilation is then:</p>
<pre class="literal-block">
import isass

s = '''
&#64;mixin box($width)
  width: $width px
body
  &#64;include box(500)
'''

print isass.get_css(s)
</pre>
</div>
<div class="section" id="variable-substitution">
<h2>Variable substitution</h2>
<p>You can use variables, prefaced by a <tt class="docutils literal">$</tt>:</p>
<pre class="literal-block">
$highlight-color: #999
#big-box
  border: 1px solid $highlight-color
#message
  color: $highlight-color
</pre>
<p>Which makes it much easier to pass colors around, as in the resultant
CSS:</p>
<pre class="literal-block">
#big-box {
  border: 1px solid #999999;
}
#message {
  color: #999999;
}
</pre>
</div>
<div class="section" id="expressions">
<h2>Expressions</h2>
<p>Cobble together simple expressions:</p>
<pre class="literal-block">
$big-width: 500
#container
  width: $big-width px
$panel-left
  float: left
  width: $big-width/2 px
</pre>
<p>And we get, in the CSS:</p>
<pre class="literal-block">
#container {
  width: 500 px;
}
$panel-left {
  float: left;
  width: 250 px;
}
</pre>
<p>Just beware that <tt class="docutils literal">/</tt> will be intrepreted as a division expression, so
if <tt class="docutils literal">/</tt> appears in <tt class="docutils literal">url()</tt> parameters, wrap it with quotation marks
<tt class="docutils literal">&quot;&quot;</tt>.</p>
</div>
<div class="section" id="mix-ins-with-arguments">
<h2>Mix-ins with arguments</h2>
<p>Mix-ins that group common elements, and can take arguments, which are
prefaced by <tt class="docutils literal">&#64;</tt>:</p>
<pre class="literal-block">
&#64;mixin left($dist)
  float: left
  margin-left: -$dist
  width: $dist - 20
  padding-right: 20

#sidebar
  &#64;include left(200px)
</pre>
<p>Gives:</p>
<pre class="literal-block">
#sidebar {
  float: left;
  margin-left: -200px;
  width: 180px;
  padding-right: 20;
}
</pre>
</div>
<div class="section" id="nesting">
<h2>Nesting</h2>
<p>Handy nesting, and self reference <tt class="docutils literal">&amp;</tt> to save even more typing:</p>
<pre class="literal-block">
#article
  a
    font:
      family: Garamond
    &amp;:link
      text-decoration: none
    &amp;:hover
      text-decoration: underline
</pre>
<p>Flattens out into:</p>
<pre class="literal-block">
#article a {
  font-family: Garamond;
}
#article a:link {
  text-decoration: none;
}
#article a:hover {
  text-decoration: underline;
}
</pre>
</div>
<div class="section" id="class-extensions">
<h2>Class Extensions</h2>
<p>Extend a class with a new twist:</p>
<pre class="literal-block">
#message
  border: 1px solid red

#bad-message
  &#64;extend #message
  background-color: red
</pre>
<p>Creates a similar class quite easily:</p>
<pre class="literal-block">
#bad-message, #message {
  border: 1px solid #ff0000;
}
#bad-message {
  background-color: #ff0000;
}
</pre>
<p>The canonical syntax reference is
<a class="reference external" href="http://sass-lang.com/guide">sass-lang.com</a></p>
</div>
</div>
<div class="section" id="command-line-interface">
<h1>Command Line Interface</h1>
<pre class="literal-block">
$ isass --help

usage: isass [-h] [-o OUTPUT] [-c] [-l [LIB_DIRS]] [-e [EXTENSION]] [-w]
             [sources [sources ...]]

isass compiles SASS-indented-syntax into CSS or SCSS.

positional arguments:
  sources               Source files or directories to process. default:
                        standard input. example: `./*.sass` or `.`

optional arguments:
  -h, --help                                show this help message and exit
  -o OUTPUT, --output OUTPUT                Output file. default: standard output
  -c, --scss                                Skip scss compilation, just return scss contents.
  -l [LIB_DIRS], --lib-dir [LIB_DIRS]       Library dir to search for &#64;imports.
  -e [EXTENSION], --extension [EXTENSION]   Search for this file extension.
  -w, --watch                               Watch for source modifications, and update output.
</pre>
<div class="section" id="cli-examples">
<h2>CLI examples:</h2>
<p>Read SASS from sources.sass , and writes produced CSS into standard
output</p>
<pre class="literal-block">
$ isass &lt; source.sass
$ isass &lt; source.sass &gt; out.css
</pre>
<p>Read SASS from all *.sass files in sources, extra-sources dirs and
myfile.sass , then writes produced CSS into standard output</p>
<pre class="literal-block">
$ isass sources/ extra-sources/ myfile.sass &gt; out.css
</pre>
<p>You can use -o or --output options to write the generated result into
specific file.</p>
<pre class="literal-block">
$ isass -o out.css sources/
</pre>
<p>Generates SCSS instead of CSS, from SASS file</p>
<pre class="literal-block">
$ isass -c &lt; source.sass
</pre>
<p>Watches for changes in source files, and automatically update output on
any changes.</p>
<pre class="literal-block">
$ isass -wo out.css source-dir/
</pre>
</div>
</div>
<div class="section" id="watchdog">
<h1>Watchdog</h1>
<p>You can use watchdog by CLI that mentioned above, Or from code:</p>
<pre class="literal-block">
from isass import SassObserver

observer = SassObserver()
observer.add_output('style.css', dirs='my-source-dir', lib_dirs='sass-libs')
observer.start()
try:
    while True:
        time.sleep(1)
except KeyboardInterrupt:
    observer.stop()
observer.join()
</pre>
</div>
</div>
</body>
</html>