HamlPy icon indicating copy to clipboard operation
HamlPy copied to clipboard

Published 20 hours ago • verified publisher icon jessemiller

:sass filter for YAML-like CSS styling

Open boscoh opened this issue 10 years ago • 2 comments

A :sass filter has been implemented to process the SASS-indented-syntax, a YAML based style-sheet format (somewhat similar to Stylus).

The big difference from Stylus is that I have written a Python-based compiler that compiles it directly into CSS within python. You can install https://github.com/boscoh/sassin by ye-olde:

 pip install sassin

with PyScss is the only dependency. If this is not automatically installed:

pip install pyscss

If these modules are installed. Then you can write HAML with YAML-like styling:

%head
   :sass
       #main
         font: Helvetica
         background-color: #AAA
      #footer
         font-size: 0.5em
#main
   Something
#footer
   small-print

Gives:

<head>
<style type='text/css'>
/*<![CDATA[*/
#main {
  font: Helvetica;
  background-color: #AAA;
}
#footer {
  font-size: 0.5em;
}
/*]]>*/
</style>
</head>
<div id='main'>
   Something
</div>
<div id='footer'>
   small-print
</div>

A filterSass.hamlpy test has been added for unit-testing.

boscoh avatar Aug 01 '13 14:08 boscoh

This looks neat. When do people end up putting sass into their haml templates instead of in a separate file?

jessemiller avatar Aug 28 '13 01:08 jessemiller

I implemented this for two reasons:

  1. I noticed that the :stylus tag was accepted into hamlpy but it was basically a stub. stylus doesn't really work in the python ecosystem. My implementation of the :sass was my way of implementing something with a similar functionality.
  2. In my work, I make a lot of special purpose web-apps. So I have tight integration of CSS, HTML and javascript. I often start with a single file, so that I can easily cross-reference DOM objects. Only if the web-app grows, do I split the files up. Some examples:
    • http://jolecule.appspot.com/pdb/1mbo#deleteview:kyyfgp
    • http://boscoh.com/geneparade/human/chromosomeY.html

My ideal is to do everything in HAML, SASS and COFFEESCRIPT, as it's semantic more consistent. I have already created my own branch that compiles COFFEESCRIPT in HAMLPY using a third party python-javascript bridge.

boscoh avatar Sep 02 '13 04:09 boscoh