Can we make this work for all CSS preprocessors?

[mrmartineau]

Hi @MaciekBaron, I think you might have seen my fork of this repo for dealing with SCSS. It kind of works, I haven't got importing done yet and my knowledge of pyhon is holding me back somewhat. While working on it, I keep thinking to myself that it would be great to extend this plugin to to work with all CSS preprocessors? What do you think?

Here are the different variable types listed:

• Scss - $var: #eee;
• Sass - $var: #eee
• Less - @var: #eee;
• Stylus - font-size = 14px (this might be quite difficult, see: variables docs)

I have started trying to do this, but my (non-existent) knowledge of python is really holding me back. Would you be keen to help?

This code checks the current syntax and changes the regex - I think.. :

if 'scss' in self.view.settings().get('syntax').lower():
    regex = "(\\$[a-zA-Z\\-_0-9]+)\\s*: *(.*);"
    suffix = '.scss'
    print "syntax: scss / " + self.view.settings().get('syntax').lower()
elif 'sass' in self.view.settings().get('syntax'):
    regex = "(\\$[a-zA-Z\\-_0-9]+)\\s*: *(.*)"
    suffix = '.sass'
    print "syntax: sass / " + self.view.settings().get('syntax').lower()
elif 'less' in self.view.settings().get('syntax'):
    regex = "(@[a-zA-Z\\-_0-9]+)\\s*: *(.*);"
    suffix = '.less'
    print "syntax: less / " + self.view.settings().get('syntax')

The scss statement works but the sass and less checks do not work at this time, plus I think there must be a more elegant way to do this.

What do you think? Would you have the time need to help make this work?

Cheers dude

@MrMartineau

[MaciekBaron]

Hi mate,

Thanks for your interest in the plugin.

I think that's a good idea, and I can have a look at it tomorrow. I just need to do more research regarding imports etc. in those different syntaxes. But overall it shouldn't be too difficult to make this work.

I think I'll create a separate fork of the plugin for this purpose.

Cheers

Maciek

[mrmartineau]

That's sounds like the best idea, thanks @MaciekBaron. I don't know if I would be much help but let me know if I can be of service - perhaps to test it for you..

[MaciekBaron]

Hi mate,

So I've created a new repo called sublime-list-stylesheet-vars.

I've done a quick test and it seems that it is working properly with all syntaxes, however it would be great if you could give it a spin too as I don't use SASS or Stylus that much so I'm not familiar with all possible combinations, scenarios etc..

At the moment each language is defined as a "setup" tuple:

less_setup = ((b'.less', b'.lessimport'), "(@[^\s\\]]*): *(.*);")

It consists of a tuple with possible file extensions (as byte arrays) and a string containing the regex for detecting variables and values.

This should work with both imported files and opened tabs.

Clone it into your Packages folder and let me know how it works!

Cheers!

[mrmartineau]

Hi Maciek, thanks for your amazingly fast work on this - it is great!

My first attempt testing the plugin was with SCSS, it did not go as expected. I have kickoff.scss that imports a bunch of other scss files for the current project. When using the shortcut, I get these errors:

command: list_stylesheet_variables
Could not load file /variables
Could not load file /mixins
Could not load file /normalize
Could not load file /choreographic-grid
Could not load file /grid-static
Could not load file /typography
Could not load file /forms
Could not load file /tables
Could not load file /code
Could not load file /components
Could not load file /sprites
Could not load file /buttons
Could not load file /button-groups
Could not load file /carousel
Could not load file /app
Could not load file /blog
Could not load file /portfolio-colours
Could not load file /utilities
Could not load file /responsive-utilities
Could not load file /print

All the errors are files that the plugin could not find. I'm not sure if you're aware but SASS imports are slightly different to LESS. Sass filesname can have an underscore at the beginning so that they do not compile directly, this means that your plugin might not be 'looking' for the right file, as they may have an underscore in the name. Have a look at the SASS docs to see what I mean.

---

With the default plugin settings, the plugin works flawlessly when viewing my _variables.scss file. It does not pick recognise any of those vars if I edit another file. If I change the settings from "readAllViews": false' to"readAllViews": true`, and my vars file is open, it works again.

I haven't tried with Stylus yet, but will give it a go now.

Thanks again mate - amazing work!

On 2 June 2013 14:21, Maciek Baron notifications@github.com wrote:

Hi mate,

So I've created a new repo called sublime-list-stylesheet-varshttps://github.com/MaciekBaron/sublime-list-stylesheet-vars .

I've done a quick test and it seems that it is working properly with all syntaxes, however it would be great if you could give it a spin too as I don't use SASS or Stylus that much so I'm not familiar with all possible combinations, scenarios etc..

At the moment each language is defined as a "setup" tuple:

lesssetup = ((b'.less', b'.lessimport'), "(@[^\s]]): *(._);")

It consists of a tuple with possible file extensions (as byte arrays) and a string containing the regex for detecting variables and values.

This should work with both imported files and opened tabs.

Clone it into your Packages folder and let me know how it works!

Cheers!

— Reply to this email directly or view it on GitHubhttps://github.com/MaciekBaron/sublime-list-less-vars/issues/3#issuecomment-18806998 .