Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

:sass filter for YAML-like CSS styling #143

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

:sass filter for YAML-like CSS styling #143

wants to merge 5 commits into from

Conversation

boscoh
Copy link
Contributor

@boscoh boscoh commented Aug 1, 2013

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.

@jessemiller
Copy link
Owner

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

@boscoh
Copy link
Contributor Author

boscoh commented Sep 2, 2013

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:

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.

@rowanseymour rowanseymour mentioned this pull request Oct 31, 2016
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@boscoh @jessemiller