Knowing how Sass works is a matter of understanding several basic technological concepts:
Sass can be based on two different technologies: Ruby or LibSass. In this book, we're going to use Sass based on Ruby.
Sass is a Ruby gem. Gems are packages for use in Ruby. A Ruby gem is a software that runs only on Ruby. Ruby is a programming language, just like PHP, .NET, Java, and so on.
We can make Sass run via the command line, but we can also run Sass with a third-party application, making the use of the command line unnecessary.
Sass is a programming/scripting language used to create CSS.
CSS is a very repetitive language. Sass allows authors to optimize those repetitive tasks and create CSS faster and more efficiently.
Part of the Sass workflow is when Sass is watching an SCSS file, for example,
book-styles.scss. When it detects a change in that SCSS file, it then compiles it into a CSS filebook-styles.css.
Tip
Watching an SCSS file means that the Sass watcher is running in the background looking over the SCSS file(s) for any changes.
Here are the steps we're going to follow:
Download the Ruby installer
Open the command line
Install the Sass gem
Windows: Download the Ruby installer from the following link:
http://rubyinstaller.org/downloads/
Mac: Ruby comes preinstalled on all Macs, so there's no need to download anything.
Type the following command into the command prompt (it doesn't matter which folder you're in):
Windows, use the following command:
gem install sass
Mac, use the following command:
sudo gem install sass
It'll take a few seconds to install Sass.
Tip
At the time of writing, the latest version of Sass was 3.4.14. The version/revisions might be different by the time the book comes out.
That's it! Sass is now installed on your machine.
What I'm about to show you is completely different to what any other Sass tutorial out there tells you to do. Most of those tutorials complicate things too much. This is the simplest way to use Sass you'll ever read.
The following screenshots are on Windows, but the process can be applied exactly the same regardless of platform.
In the following steps, you will see examples of how the necessary folders and files look after being created, not how to create them:
Create a
/Demofolder anywhere on your drive:
Inside that folder, create two subfolders,
/cssand/scss:
Create a
.scssfile. Go into the/scssfolder and create a file calledstyles.scss:
Go back to the command line for a minute and follow these steps:
Make Sass watch your
/scssand/cssfolders by typing this in the command line:sass --watch scss:cssMake Sass watch the
/scssand/cssfolders.
That's it! You are now using Sass!
Edit the
.scssfile and watch Sass compile it into a.cssfile:Open your text editor (I use Sublime Text).
Open the
styles.scssfile.Add some CSS to it.
Save the
styles.scssfile.From your command line/terminal, verify that the compiling was successful.
Open your
styles.cssfile and enjoy your new creation.
