Tutorial: Sass and Dreamweaver – Easier Said than Done

Rube Goldberg

A little more complicated than I'd like.

OK, getting Dreamweaver to play nice with Sass might not be as Rube Goldberg-ish as it first appears but I must admit that describing CSS as kludgie in my previous post is perhaps a bit ironic.

But enough drollery, let’s see how to get some Sass goodness applied to your Dreamweaver development environment.

First, we’ll make sure your environment is setup to run Sass and then we’ll create a project in Dreamweaver that can take advantage of Sass for all your new and improved CSS goodness. After that we’ll run Sass from the command line and see how making changes to the Sass source file generates the main CSS style-sheet used in the project. As a bonus I’ll cover the AutoHotKey file I use to make convenient Sass batch files.

Let’s get started.

The Video

A quick look at what we’re doing.

The Write-Up

Setup

If you don’t have Ruby installed and available from a command prompt you’ll need to fix that. Apple systems should be good to go (in theory.) For Windows go here and install the most current version of Ruby you can (1.9.2-p290 at the time of this post.)

Once you’ve confirmed Ruby is available go ahead and install Sass by running the following:

> gem install sass

Assuming everything goes without a hitch you should now configure Dreamweaver to recognize and play well with .sass/.scss files. There is a very helpful thread over on stackoverflow.com that will point you to various solutions and guides depending on your Dw version so your files can be edited with the default editor and have things like color coding and auto-indentation, etc. Being a strong proponent of the not-re-creating-the-wheel school of bloggery I bid thee go thither and find the solution that works best for you.

All done? Let’s move along then, shall we?

Project

Create a new Dreamweaver project in the location of your choice. For the purposes of this tutorial we’re keeping it as simple as possible: just a folder and a project name and we’re good to go.

Within the project create a new html file. Go ahead and use one of the HTML5 templates since that will have content as well as a connected CSS file. Save the new file (index.html is fine.) You should now have 2 files, index.html and style.css, in you project folder. Make sure the Files window is open, right-click in it and choose New File from the context menu. Name it source.scss. Open this new file and then copy the contents of style.css into it. Once we get the Sass process up and running any changes you make in source.scss will automatically show up in style.css. Remeber this: source.scss is now the source file for style.css (which index.html is pointing to) so only make CSS changes to source.scss from now on.

The Sass

Open a command prompt. The easiest thing to do is to select the Ruby-ized command prompt from the Ruby Start Menu; that way you know you have the Ruby executables in your path. From the command prompt change directories to where ever your project files are living.

Now, if you’ve named the files as specified above (index.html, style.css & source.scss) type the following at the prompt:

> sass --watch source.scss:style.css

There. Now you are Sass-ified. The above command starts Sass in “watch” mode which means it monitors a source file (source.scss in our case) for changes and when it catches any it will process the source and write the converted information to an output file (style.css for us.) When ever you save changes made to source.scss they will be interpreted and re-written to style.css. Groovy, right?

Well, kind of. It’s just that Dreamweaver has a bit of a problem recognizing that style.css has been updated so you kind of have to smack it around a bit, which I’ll cover next.

Making it Work

Go ahead. Make a change to source.scss and then save the changes (I use Ctrl-s [Cmd-s on Mac].) If you check out style.css you’ll notice that nothing has changed. Bummer.

Actually you need to nudge Dw so it will recognize that there’s been a change. There may be other, more streamlined, methods for accomplishing this but I found that by switching out of Dw to another window and then switching back (I use Alt-Tab to quickly switch out and back) triggers Dw to popup a dialog notifying me that style.css “has been modified outside of Dreamweaver. Dow you want to reload it?” to which I answer Yes.

And, VoilĂ ! Your drab old CSS style-sheet has been Sass-ed. Now the real fun can begin and you can start Sass-ing to your hearts content.

Sass away, say I. You’ll be glad you did.

In Closing

Is it a pain to use Sass with Dreamweaver? A bit, admittedly. Some day Adobe or a third party will get it and/or its siblings integrated so it becomes seamless. Until then though you can at least get started with Sass and start building your snippets and libraries with just a little bit of work.

It seems worth it in my book.

Lagniappe

Here’s an AutoHotkey script that I use for spitting out Sass monitor batch files. I’m sure there’s a way to make the batch file mouse clickable but since I have a mental aversion to writing DOS batch files I’ll leave it as an exercise for the student and continue to fire them off from the command line.

(PS – If you don’t already have AutoHotkey you’re missing out. Seriously cool stuff.)

[sourcecode language="php"]
#NoEnv ; Recommended for performance and compatibility with future AutoHotkey releases.
SendMode Input ; Recommended for new scripts due to its superior speed and reliability.

; Get the SASS source file
FileSelectFile, scssFile, 3, , Select a SASS source file, SASS Documents (*.scss; *.sass)
if scssFile =
MsgBox, No SASS file selected.
else
{
; Get the actual CSS file
FileSelectFile, cssFile, 3, , Select a CSS output file, CSS Documents (*.css)
if cssFile =
MsgBox, No css file selected.
else
{
; Select folder where the batch file goes
FileSelectFolder, outFolder,, 1, Save script to which folder?
if outFolder =
MsgBox, No folder selected.
else
{
; Comment or delete the next line if you wish
MsgBox, File will be written to %outFolder%sassWatch.bat

; Start with a fresh file
FileDelete, %outFolder%sassWatch.bat

; output batch file
FileAppend,
(
sass –watch "%scssFile%":"%cssFile%"
), %outFolder%sassWatch.bat
}
}
}[/sourcecode]

One thought on “Tutorial: Sass and Dreamweaver – Easier Said than Done

  1. Hi there,

    I finally took the leap to get into SASS and this tutorial was tremendously helpful in getting it to work within my current workflow with DreamWeaver (not ready to move to SublimeText…yet). The only caveat that I’ve run into is having to alt-tab everytime to refresh the compiled CSS. I checked out AutoHotKey, but I can’t for the life of me figure out how to use that program or this particular snippet you posted. When I attempt to use it, I get an error on the very first line of your script. Would you possible be able to explain to a beginner how to set up AutoHotKey so I don’t need to alt-tab everytime? :)

    Again, thanks so much!

    – Lars

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>