Sublime Forum

Auto-open .css file when opening .scss file

#1

Hey guys,

I’m looking for a package/plugin that will automagically open up the corresponding css file when I open up an scss file.

I use CodeKit to compile and save the /scss into the /css folder.

On my old Mac, I had it somehow set up that every time I opened say: scss/home.scss, my css/home.css file would also automatically open into another tab and monitoring would be turned on by default.

All I’d have to do is open my scss file and make changes and save and then codekit and sftp monitoring would do the rest of the magic.

I have looked over my old Mac set up but cannot determine how it was achieving this automatic opening of css files for me.

Any help is greatly appreciated.

Scott

0 Likes
#2

Assuming you have a directory structure like the following :-

├───css
│       main.css
│
└───scss
        main.scss

Then the simplest way to solve your problem would be to use the following keybinding.

{
	"keys": ["ctrl+alt+shift+t"],
	"command": "open_file",
	"args": {
		"file": "../css/${file_base_name}.css",
	},
},

This assumes that you already have a css/main.css. If not it will create, the key binding will create it then.
Pressing this key bindings when the current file is main.scss, should open the corresponding css/main.css file.

Of course, this is not automagic (you would require a plugin for that), but it is simple.

2 Likes
#3

Thanks for the reply mate. I’ve never played with keybindings before, but I’ll give this a go. I appreciate the tip.

However I would kill to know how my old setup was able to do what it was doing. I cannot find anything in the Package Control list of packages that different to my new setup. Go figure?

0 Likes
#4

I am not aware of a package/plugin that does this to be honest, but writing a plugin for this should be trivial. Let me see if I can whip one up.

2 Likes
#5

Wow OK.

Well if that’s the case, the desired/ideal functionality is:

  1. When I open xxx.scss, sublime will open …/css/xxx.css,

  2. turns on sftp monitoring for the css file,

  3. Makes the scss file tab the currently active tab rather than the css file which isn’t going to be manually edited since CodeKit will compile this. (this last part wasn’t something it did before but I really wished it did!)

If you come up with something, you most definitely should share it as this workflow saves numerous extra manual openings and monitoring of files.

Scott

0 Likes
#6

Here is something I quickly came up with.

import sublime
import sublime_plugin
import os

class OpenCSSAutoMagicListener(sublime_plugin.EventListener):

	def on_load_async(self, view):
		scss_file = view.file_name()
		if scss_file.endswith(".scss"):
			target_css_file = os.path.join(os.path.dirname(os.path.dirname(scss_file)), "css", os.path.splitext(os.path.basename(scss_file))[0] + ".css")
			if not os.path.exists(target_css_file):
				return
			view.window().open_file(target_css_file)
			view.window().focus_view(view)

To use this, just copy the code and put it in a python file (The name can be anything you want, e.g. css_opener.py) and then put the file in the User directory (Preferences -> Browse Packages from main menu to get to User).

Now, whenever you open a scss file (e.g. /my_website/scss/main.scss), it will open the corresponding css file (e.g. /my_website/css/main.css) if it exists. And the focus is kept on the scss file.

I am not sure what sftp monitoring means, sorry.

Note:
Again, this will only work with the directory structure I posted previously.

0 Likes
#7

Wow! Thank you. I will give this a go now.

SFTP is a plugin/package that provides FTP and remote server features. “Monitoring” listens for external changes/saves to a file (the css file), and automatically uploads them to the FTP.

So when you save changes to the SCSS file, CodeKit compiles it and overwrites/saves the CSS file, which triggers SFTP to upload the CSS file.

To manually tell SFTP to monitor a file and listen for changes you have to press Command+Control+U,M while in the CSS file.

0 Likes
#8

I have only ever used node-sass before from the cmd line to compile sass files so I am not sure how Codekit works. But if it has a command line option to compile sass files, then compiling sass -> css on save should be easy.

0 Likes
#9

I believe this should do the trick:

sublime.active_window().run_command(“sftp_monitor_file”)

… run on the css file.

0 Likes