Using Sass in Windows

If you’re reading this post, I will assume that you are already familiar with Sass. If not, it’s a CSS pre-processor, which adds support for variables, selector nesting, and other features to your CSS styles. See the Sass website for more information.

Here’s how I use Sass with my development process. There are many ways of integrating it into your workflow, so feel free to play around when you’re more comfortable. Your first step is to install Ruby.

Installing Ruby

Visit the Ruby Installer website to get the latest installer for Windows, and go ahead and complete the installation. When it asks about adding Ruby executables to your PATH, check the box. Otherwise, you will need to type the full directory path to execute the Ruby program. It’s also a good idea to associate .rb and .rbw files with Ruby. The installation should complete without the need for any other input.

Installing the Sass Ruby Gem

Now that Ruby is installed, it’s time to install Sass. Sass is packaged as a Ruby “gem,” and gems are basically programs that rely on Ruby to run. We’ll be using Sass from the command line, so open a command prompt (Windows key + R, then type cmd and press OK). Let’s make sure that Ruby was installed correctly by typing ruby -v and pressing Enter. If the version number that you installed appears, then you’re good to go.

To install Sass, type gem install sass and press Enter. Hopefully, everything went well, and now it’s time to start using it.

Sass Workflow

The two major workflows that I’m aware of are:

  1. Using Sass locally for development and deploying CSS to the production server
  2. Deploying Sass to the server and relying on server code to translate it into CSS before serving it up to website visitors

Obviously, the second process is a bit more complex, so we’ll focus on the first — but feel free to investigate further if the other workflow is more appealing to you.

I create two directories in my Web projects: one called “scss” for my .scss (Sass) files and one called “css” for my final, minified CSS files. To make the translation from Sass to CSS simple, we’ll use the --watch modifier in the Sass command line tool to automatically handle the translation any time we save our Sass files. Assuming you’ve created these directories and started your own .scss file in the “scss” folder, you’ll need to open your command prompt and change to your project directory (e.g. cd C:\Users\username\websites).

Next, enter the following command:

sass --watch scss:css

It should respond by saying, “Sass is watching for changes.” Go ahead and make some updates to your Sass file, save them, and check your “css” folder to see how Sass is automatically translating your Sass code into CSS. When you’re done, hit Ctrl+C in the command prompt and enter “y” when it asks to terminate the batch job to stop Sass from watching for changes.

One more thing: your CSS code should really be minified/compressed before deploying to the server. You can do this with the --style modifier. So instead of the earlier command you entered, use the following:

sass --watch scss:css --style compressed

There are many other things you can do with the Sass command line tool, but this is a good starting point, and should be just enough to start using Sass in your own workflow.

Information and Tutorials for Popular Content Management Systems

This post is just a quick reference for information and tutorials about common CMS’s. I’ll try to update it as I have time.





SilverStripe CMS



What’s New in Ektron 8.6?

Ektron 8.6 was released on June 28, 2012, without much fanfare. I did a quick Google search but was hard pressed to find much about it. So, I’ve decided to post my own findings, based mainly on Ektron’s product release notes and from my own quick installation and testing.

This is not an extensive review of all of the updates in 8.6 — but more of an overview of some of the major changes.

Adaptive Image Resizing for Mobile Devices

Responsive images for mobile devices have been gathering a lot of attention lately, and fortunately, Ektron is now offering the ability to serve up images based on the user’s screen size. Unfortunately, it relies on device detection to do so, but as there is no real standard yet for handling this problem, I commend them for taking the time to implement this useful feature.

Ektron has been trying really hard to be a leader in the CMS mobile market, and changes like this help to reinforce their dedication to that position.

New WYSIWYG Editor

I’ve never been a fan of Ektron’s default WYSIWYG editor, so I’m glad to see them moving toward third-party alternatives, such as Aloha Editor. Aloha is a great editor, especially when editing content in-line, and is a huge step forward. Personally, I’m relieved that I won’t have to deal with that annoying bug where <p> tags are removed when only one paragraph appears in content.

Improved Search

Microsoft FAST is available as a search provider, and popular features such as “did you mean…” and auto-suggestions are now included as well. Each new Ektron release tends to focus very much on search improvements. In the future, however, I would like to see a little less attention paid to this area. Although better search results and features are nice, I rarely hear complaints from clients about how slow the search is or how they wish the results were more accurate. Maybe that’s just me, though.

New URL Aliasing Options

In addition to the automatic and manual URL aliasing features, you can now use improved regular expressions to determine the URL structure. There are also options for managing URL redirects — very helpful when a URL needs to be changed.

Other Updates

Version 8.6 also offers three more templated server controls (Content, Menu, and Access Point), updates to eSync, and a ton of bug fixes. Overall, this doesn’t seem to be a major update unless you’re sick of the eWebEditPro editor or have a vested interest in regex URLs or serving up mobile-optimized images, but there appears to be some clean-up going on, and I think Ektron is heading in the right direction by placing more emphasis on mobile devices and making it easier on authors through third-party WYSIWYG editors.