SASS User Tool for Editplus

SASS User Tool for Editplus

I needed to simplify things to use the SASS scripting language for writing CSS, and I came up with an user tool for Editplus.

Editplus is a useful software to write any kind of code, because it is very flexible that if you know how to do it, you can write your own tools to co-op with this software for example user tools like html tidy, css tidy or indent code, or auto completion for any language that you can think, code colorization, remote file editing directly from FTP, managing projects.. it has too many specialities to tell, you should give it a try.

 

Well, it’s a bit complicated but not impossible. Here’s how it works:

You write a .scss or .sass file in editplus and while it is the active window in it, just pressing one shortcut key compiles it to .css file at the same folder.

It’s too easy to use but was hard for me to write it 🙂 I’m used to any VB code since VB6 but lately I’ve been busy with C# and PHP like curly braced and semi-colon’ed languages, so it took a while to remember the good ol’ VB days. it was good though.

Well, here’s how you can install it on your own computer.

 

First, you need SASS and Ruby etc. installed and running.

Second, create a “sassy.vbs” file inside your editplus application folder and paste this code inside:

Set ArgObj = WScript.Arguments

filename = Right(ArgObj(0),Len(ArgObj(0)) - InstrRev(ArgObj(0),"\"))
extension = Right(ArgObj(0),Len(ArgObj(0)) - InstrRev(ArgObj(0),"."))

If extension<>"sass" and extension<>"scss" Then
    WScript.StdOut.WriteLine "Error: Sorry. Only works with .sass and .scss files."
    WScript.Quit
End If 

var2 = Left(filename,InstrRev(filename,".")) & "css"
var3 = Left(ArgObj(0),InstrRev(ArgObj(0),"\")) & var2

str = """" & ArgObj(1) & "\sassy.bat"" """ & ArgObj(0) & """ """ & var3 & """"

Function ExecuteWithTerminalOutput(cmd)
    Set sh = WScript.CreateObject("WScript.Shell")
    Set exec =  sh.Exec(cmd)
    Do While exec.Status = 0
        WScript.Sleep 100
        WScript.StdOut.Write(exec.StdOut.ReadAll())
        WScript.StdErr.Write(exec.StdErr.ReadAll())
    Loop
    ExecuteWithTerminalOutput = exec.Status
End Function

Call ExecuteWithTerminalOutput(str)

 

Then create a “sassy.bat” file in the same directory and paste this code inside it:

@echo off
sass %1 %2
@echo on

Now our files are ready to integrate into Editplus.

 

  • Open Editplus, Go to the “Tools” Menu
  • Choose “Configure User Tools”
  • Click “Add Tool >>”
  • Write to the Menu text anything you want.
  • To the “Command” input this:
    • cscript //NoLogo “C:\Program Files (x86)\EditPlus 3\sassy.vbs”
  • Into Arguments input (with quotes):
    • “$(FilePath)” “$(AppDir)”

Set the others like in the picture above. Note that the Command Input contains the path to the sassy.vbs file and it should be the correct path for our script to work.

 

sass3

The setup seems complete. Now give it a try. Create a .scss or .sass file which you are familiar with or which example you have in your hand. Then fill the file with some SASS code and save.

Now open the “Tools” menu from above and select the SASS Converter you just created from the bottom of the menu. It should show you the errors if there’s one in the bottom console. If you hear a system sound after you click this, it means that the compilation is successful. Otherwise, there are some errors in your SASS file.

I built it only to use with .sass and .scss files, so you may want to open the preferences -> settings and syntax page and add .sass and .scss extensions to your CSS extension list.