Book Image

Mastering Sass

By : Luke Watts
Book Image

Mastering Sass

By: Luke Watts

Overview of this book

CSS and Sass add elegance and excellence to the basic language, and consist of a CSS-compatible syntax that allows you to use variables, nested rules, mixins, inline imports, and much more. This book will start with an overview of the features in Sass and Compass, most of which you'll already be familiar; however, this will ensure you know what’s expected as the book goes deeper into Sass and Compass. Next you will learn CSS and HTML concepts that are vital to a good Sass workflow. After all, Sass exists to simplify writing CSS, but it won’t teach you how to make clean, scalable, reusable CSS. For that, you need to understand some basic concepts of OOCSS, SMACCS, and Atomic Design. Once you’ve brushed up on the important concepts, it’s time to write some Sass. Mainly you’ll write a few functions and mixins that really leverage control flow using @if / @else loops and you’ll learn how to figure out when and why things are going wrong before they bring you to a stop. Moving further, you’ll learn how to use @debug, @warn and @error to properly handle errors. You’ll also learn about Gulp and how to use it to automate your workflow and reduce your repetitive tasks. And finally you’ll learn about sourcemaps. With sourcemaps, you’ll be able to write, debug, and view your Sass and Compass all from within the browser. It’ll even LiveReload too! As a bonus, you’ll take a look at that funky Flexbox, currently all the rage! You’ll learn how powerful and flexible it really is, and how you can use it with Compass. Best of all, it falls back very gracefully indeed! In fact, you’ll be able to apply it to any existing project without having to change a line of the original CSS.
Table of Contents (16 chapters)
Mastering Sass
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Ruby, Sass, and Compass


If you've used Sass and Compass before, then you already have installed them. However, I'd like to ensure your versions of Ruby, Sass, and Compass are all what they need to be to follow along with the examples I'll use later in the book. Many of the topics will use the very latest features of Sass and Compass.

Ruby

Sass and Compass run on a language called Ruby. Ruby became very popular in web development by offering clean syntax while still being very powerful. It achieves this power and simplicity by being strictly object oriented. In simple terms, everything from a single letter to a full class is treated as its own object in Ruby, meaning you can treat everything in Ruby much the same way. There are no second class citizens in Ruby.

In this book, we won't be working directly with Ruby; however, you do need it installed for Sass and Compass. So let's look at getting set up.

Ruby installer for Windows

I'm currently working on Windows. Yes, you read that correctly, I'm one of those weirdos who is actually more productive using Windows than Mac. So, for those of you on Windows, you'll know we don't have Ruby on our systems by default. It's not a big issue. You just go to http://rubyinstaller.org/downloads/ and you'll find a list of all available .exe installers for the stable Ruby versions.

Tip

What version should I use?

I like to always be one step behind on this one. What I mean by that is, at the time of writing, the current stable release of Ruby is 2.2.3. The previous stable release was 2.1.7. So I have 2.1.7 installed. The reason I choose to do this is gems are more likely to have been updated to work with at least 2.1.7.

Updating Ruby for Windows

I also have Ruby 1.9.3p551 installed on my system, and updating wasn't as straightforward a process as installing was. So, let's quickly explain how to install multiple versions of Ruby and switch between them if you need to.

The following method will allow you to have multiple Ruby versions installed but will require editing your PATH manually to switch between versions:

  1. To start with, simply download and run the installer as normal. The RubyInstaller executable creates a separate folder for each Ruby version so you don't have to uninstall or overwrite your current version.

  2. Select your language and read and accept the License Agreement.

  3. Next, you'll be asked what directory to install Ruby into and also whether to Install Td/Tk Support, Add Ruby executables to your PATH, and Associate .rb and .rbw files with this Ruby installation. You can keep the defaults here, as shown in the following screenshot:

    Installing Ruby on Windows

  4. Next, you may need to update your system Path manually to use the newer version of Ruby. To check this, simply open the cmd.exe (WinKey + R , then type cmd and hit Enter ). Then, type the following command:

    ruby -v
    

    If your version is incorrect, you'll need to update your PATH variable manually. I'll also explain why this happens, seeing as it's actually a common problem with some applications.

    Note

    After you've switched to a new version of Ruby, you'll need to install your gems again for that version. To see what gems you have installed you can run gem list.

  5. To update your PATH you'll need to open up your System Properties. You can do this by going to your Windows start screen and typing System Environment Variables and selecting the first option, Edit your system's Environment Variables.

  6. Next, select Environment Variables.

    System properties

  7. Then you'll need to set your System variables | Path value. The installation process will update the PATH variable for the user account but not the global path variable.

    Setting the System Variables path

  8. Replace the incorrect version of Ruby with the newer version you wish to use.

    Note

    The correct format is C:\Ruby21-x64\bin;, with no trailing slashes, and do not include the .exe executables.

  9. To check everything is working, open cmd again and type ruby -v. You should see the correct version.

Updating Ruby for Mac

There are many more options for installing/updating Ruby for Mac. Depending on your OS version, you'll already have either 1.8.x or 2.0.x installed on your system by default. However, if you haven't updated, you may want to update to 2.1.7 or later. To do this, you can use Homebrew to easily update to the latest release with the following command:

brew install ruby

If you wish to have multiple version of Ruby on your system, you may want to look into a package manager such as Ruby Package Manager (RVM). You can learn more about RVM from their website at http://rvm.io/.

Sass and Compass

This one is easy. I'm using the most up-to-date versions of Sass and Compass, Sass 3.4.19 (Selective Steve) and Compass 1.0.3 (Polaris). If this is your first time installing Sass and Compass or you recently upgraded your version of Ruby, then the easiest way to install both is to simply install Compass using the following command:

gem install compass

Again, you can check everything is working by running the following command:

sass -v && compass -v

This will run each command one after the other.