search

jeremyworboys / Sassy-Media

Sassy Media re-factors media queries within the CSS outputted by SASS to enhance compression and readability.
18 stars 2 forks source link

Sublime Plugin #2

Open jeremyworboys opened 12 years ago

jeremyworboys commented 12 years ago

Opening discussion for creating a Sublime Text 2 plugin.

bgallagh3r commented 12 years ago

Unfortunately I don't write in python, but essentially all that would be required is a command that fires on a key press.

I'm not sure how familiar you are with ST2, but you can check out these links:

So if I understand your script correctly, it looks for multiple @media queries with the same values in the .CSS files and refactors them together into one query correct? If so this would be an invaluable addition to ST2 or Sass in general.

Essentially you create the plugin to run via a command and in ST2 you can bind keyboard shortcuts to the name of the command, but the awesome part is you can attach that command to build scripts as well, so I when I am working in a Sass/Scss file, I can have it fire a build script when I save the file, in the build script it can run the command to look over the css file and run.

The biggest hurdle will be since the user will be working in the Sass file, the Sassy Media plugin would need find out where the regular css file is and run on that file instead. If you are using compass/sass you could always reference the config.rb file.

I wouldn't be opposed to just leaving it as a basic command though, like the Prefixr plugin I'd have to run it on the CSS anyways so not a huge deal I suppose.

jeremyworboys commented 12 years ago

ST2 is my primary editor. The main thing I was trying to figure out was how you would to run it.

I will take a look at the Prefixr plugin since it is a similar concept and see what I can come up with.

bgallagh3r commented 12 years ago

This is the "real" prefixr plugin by Will Bond. He's an ST2 genius. If anyone could help you out on this it'd be him. He's the one that wrote Package Control, SFTP/SVN and Prefixr.

https://github.com/wbond/sublime_prefixr

Prefixr just adds a keymap, and menu options in the package that allows you to bind the prefixr command to a shortcut. Simple enough I assume.

jeremyworboys commented 12 years ago

So the workflow would be:

CSS

  1. Write CSS
  2. Press shortcut to run Sassy Media
  3. Sassy Media outputs new CSS

SCSS/SASS

  1. Write SCSS/SASS
  2. Run build script
  3. Build script calls outputs CSS
  4. Build script calls Sassy Media
  5. Sassy Media outputs new CSS

How does that sound?

bgallagh3r commented 12 years ago

Ya the build script would be the hardest part. With just sass, the dirs are specific /sass and /stylesheets, but with Compass you can define your sass, css, fonts and js folders in the config.rb file in the root of your project. So the build script would need to figure out where the CSS is first then run on it.

jeremyworboys commented 12 years ago

You're right. I'll look into creating the basic keyboard command system first and then expand from there.