Sass and LESS actually share some common languages, below are a few of them. If you are working with Sublime Text 2 like I do, you can use these packages Sublime Text HAML & Sass and Sublime Text 2 Sass Package, and for an easier way, you can install one of these packages through Package Control. Fortunately, there are already some packages for almost any code editor to enable. Code HighlightingĪlthough Sass is primarily a CSS extension, your current editor may not highlight the syntax properly. The price varies for each app, Compass.app goes for $10, Fire.app, $14 and Codekit for $25. So if you don’t have the patience for it, there are also some paid options. However, it runs very slow as some have previously reported. The free option is Scout it is built on Adobe Air so it can be run on all OS (Windows, OSX and Linux). However, if you hate working through Terminal or Command Prompt, you can use some applications for Sass. If the watch command succeeds, something like this notification below will appear in your Terminal/Command Prompt.įurther Reading: Auto-Compile Sass Files with Sass 3 Sass Applications Sass -watch path/sass-directory/styles.css We can also watch a specific file rather than the directory, with this command line Sass -watch path/sass-directory:path/css-directory If we need Sass to generate the files in a specific directory, we can do it this way sass files in path/directory and whenever one of the files in that directory is changed, Sass will update the corresponding files or create one if none exists. Next, we need to select which directory for Sass to watch using the following command If the installation succeeds, you will have the following notification in your Terminal/Command Prompt. If you may to install Ruby in Windows, use this Ruby Installer.Īfter the installation is complete, you can go to Terminal (on a Mac) or in Command Prompt (on Windows) then type the following command line in it:

If you are working on a Mac, chances are, you already have Ruby installed. Installing Sassīefore we can compose Sass we need to install it. Both Sass and LESS are CSS Preprocessors which primarily extend the way we compose plain-static-CSS in more dynamic way using programming languages like Variables, Mixins, and Functions. If you have been following our previous posts on LESS, we are sure that you are familiar with the CSS Preprocessor.

In this post, we are going to discuss a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets.

Install sass for mac