Category: CSS

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.

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.

In this post, I introduced some of the powers of SASS language, and I left the rest of the exploration to you, because I didn’t really go deep yet. But first you need to install it on your system to use it of course.

In their website, they explained how to install it on Linux and MacOS, and mentioned how to install on a Windows system but i needed to figure it out because before that, I never had a relationship with Ruby. And lucky me(!), SASS uses Ruby to operate.

Let me explain what I did.

First get the latest Ruby installer here : http://rubyinstaller.org/downloads/

Second, double click and start the installation, accept the licence agreement, and on the second page, check all of the checkboxes and click Install.

When the installation finishes, open a Command Prompt window (Win+R then type “cmd” and press enter)

Then type this:

ruby -S gem install sass

and wait for the script to install SASS. (It feels like using apt-get or yum :P). when you finish installing SASS, type this:

sass --help

and if you see a list of parameters and explanations, then your SASS is ready to be used.

As the official website says, Sass is an extension of CSS3, adding nested rules, variables,mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as ‘SCSS’ (for ‘Sassy CSS’), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension: .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension: .sass.

$blue: #0000ff;
$margin: 10px;

@mixin table-base {
  th {
	@extend td;
	background-color: darken($blue, 10%);
    text-align: center;
    font-weight: bold
  }
  td, th {
	padding: 2px;
	font-size:11px;
	font-family: Tahoma, Arial, sans-serif
	}
}

@mixin left($dist) {
  float: left;
  margin: $margin/2;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

/* CSS */
#data {
  float: left;
  margin: 5px;
  margin-left: 10px; }
  #data th {
    background-color: #0000cc;
    text-align: center;
    font-weight: bold; }
  #data td, #data th, #data th {
    padding: 2px;
    font-size: 11px;
    font-family: Tahoma, Arial, sans-serif; }

In my next post, I’ll explain how to install it on Windows systems. Meanwhile, you could check it’s beautiful website which contains tutorials about SASS language and a detailed documentation.