Connecting Dreamweaver, Prepros, and FTP: Compiling SASS/LESS the Easy Way

Edit: Dreamweaver 2017 now natively can compile CSS preprocessor languages like SASS and LESS. It requires each site to have a specific entry in the Site Manager, and you can check out the full documentation for that here. If you are unable to have specific entries in the Site Manager or just isn’t worth the loss of organization, the method below is for you. 

One of the things we strive for as developers is efficiency. It’s unfortunate, then, that using a CSS preprocessor language like LESS or SASS — which otherwise make our lives so much easier — ends up taking forever to make small tweaks. Using several different programs to accomplish one task, you have to download the files from FTP, pull them into Prepros, edit it in a text editor, compile it, upload it back to the server, do testing, and repeat as needed. Not only is it a minor inconvenience, but it tremendously slows down your process. Due to the number of windows and programs open for this job, your work space becomes cluttered, and I often find myself distracted and losing focus because of it.

Simple Instructions

1. Set up access to your Dreamweaver FTP and download the site (or at least the portion of it you will be working on).
2. In Prepros, add the local folder to your projects (and rename if necessary).
3. In Dreamweaver, open the LESS or SASS file you want to edit. Edit it. Save it.
4. ‘Put’ the newly compiled CSS file back up to the server (assuming it compiled successfully).
5. Rinse and repeat until your changes are done!

In-Depth Instructions (with Photos!)

1. So the first thing we have to do is to connect up our Dreamweaver to the site’s FTP location. This is super easy to do, and many of you probably already know how to do it. If you do, click here to skip. Otherwise, read on!
   • Go to Manage Sites and add New Site.
     
   • The only difference a remote site has over a local site, is that you will go to Servers to set it up instead of Site (on the left column of the new pop up box; see image). Then click the plus sign to add the FTP information and the name of the local folder.
     
     • Note: If you want your changes to upload immediately on saving, be sure to check the feature for that under the advanced settings! It’s off by default. If you don’t enable it now, you will have to manually upload them in Step Six.
   • Perfect! Now your Dreamweaver is set up to work directly in the remote server. Just make sure you click the ‘Connect to Remote Server Button’ as seen below.
     
2. Our second step is to download the appropriate files from the remote server. Unfortunately because the server can’t process our LESS/SASS files, this is still a critical step. But now that we have Dreamweaver set up, it’s a cinch. You really only need to download the LESS/SASS files and the associated CSS file, but I tend to download the whole site anyway — especially if I’ll be working on it frequently and on more than just CSS. If I’m working on WordPress, for example, I’ll download the entire active theme folder.
   • If you’re not sure how to do this, just select the file(s) or folder(s) you want to download, right click it, and click ‘Get.’ You’ll be asked if you want to download dependent files. It really doesn’t matter which you select for our purposes here. ‘Yes’ will take longer, but it will download any file your files call (e.g. an image used for a background in the CSS file).
3. Once you have the folders on your local machine, it’s time to open up Prepros! On the bottom left of your PrePros window, Add Project. Then select the local copy of the site you want to work on. This is the path you set up in ‘Manage Sites’ from step one. Once it loads, you’ll get a ‘project added successfully’ message pop up. Now we just need to configure things a little more in PrePros…
   
4. This step may vary based on your file architecture. If your LESS or SASS file is in a different directory than your CSS file, you’ll need to change the output path. You also need to make sure the file is set to Auto Compile. Rinse and repeat for any other files you will be compressing/compiling.
   
5. Return to Dreamweaver, open the LESS/SASS file, make your changes, and save! You’ll see a pop up on the bottom right corner of your screen telling you the file was compiled successfully (or unsuccessfully, for that matter).
   
6. Final Step: ‘Put’ the CSS file back to the server and you’re done! Please note that if you didn’t set Dreamweaver to automatically put files back to the remote server after you save them, you will have to manually put back the file you were working on too (i.e. the LESS/SASS file).
   

Now you can work on the site entirely within Dreamweaver and not get bogged down and distracted by running several programs just to accomplish one thing! Unfortunately, you’ll still have to run through these steps for every different site you work on… but you’re saving time for your future self.