SASS Support?
joeldrapper opened this issue · comments
Any chance of getting this to work with SASS comments?
You can use // to comment lines. The Sass pre processor will allow that.
What issue are you having with Sass comments?
Hey guys, I'm strapped for time but have added a bounty for this issue.
@joeldrapper, what exactly isn't working for you with the Sass comments? Are you using /* */ style comments? Please explain a bit more please...
As I understand - the issue is with the sass compiler adding asterix(*) in front of every new line of a multiline comment. The comment syntax is:
/* ## Buttons
* ```
* <a href="#" class="Button"></a>
* <a href="#" class="Btn Btn--primary"></a>
* <a href="#" class="Btn Btn--secondary"></a>
* ```
*/
This breaks the markdown parser of kalei.
I managed to get it to work by modifying it a little.
The modified file is in /js/libs/jscssp/jscssp.js -> line 4138.
Make this line to look like:
this.addComment(sheet, token.value.replace(/\s\*\s/g,""));
Obviously this will get the comment from your styles and remove every occurrence of " * " (space star space) and then parse it. It is a quick and dirty fix, but it worked in my case.
any update on Sass support?
This is a great tool! Will be even better if it supports SASS. How is this coming?
You can use gulp or grunt to get it working with with SASS.
@MaikelGG Please explain how. All I can think of is if you want to use it to display the generated CSS which is not what we want (or at least what I want). I need a styleguide to document SASS, not CSS.
I did it like this.
Create a folder structure in your sass folder, where you have your sass selectors separated from your kalei comments file. I have all my sass in partials:
https://github.com/greenpeace/ggw_styleguide/tree/master/src/sass
The scss file in the root (ggw.styles.scss) which gets all the partials doesn't process the sass/styleguide files. The rest of all sass files are processed into one css file with gulp tasks.
The scss files in sass/styleguide folder get copied to the styleguide(kalei) folder with a separate task (docs-styleguide).
The only manual work I need to do is whenever I create a new file in sass/styleguide, I need to insert and import statement in my src/css/styleguide.css so kalei also sees it. This cannot be automated.
Everything else will be done by gulpjs. This is of course also possible with grunt.
The challenge is to figure out what you want to copy where and where you want to process sass, and what files you need to leave alone and just copy. For example you do not want to compile the file that imports the kalei comments, so that needs to be extracted.
For further reference you can have a look at https://github.com/greenpeace/ggw_styleguide, but please note this is work in progress.
Great stuff @MaikelGG i definately need to take a look at your setup.