You're reading from Sass and Compass Designer's Cookbook Over 120 practical and easy-to-understand recipes that explain how to use Sass and Compass to write efficient, maintainable, and reusable CSS code for your web development projects

Product type Paperback

Published in Apr 2016

Publisher Packt

ISBN-13 9781783286935

Length 436 pages

Edition 1st Edition

Languages

CSS

Tools

Compass

Concepts

Web Design

Authors (2):

Bass Jobsen

Stuart Robson

View More author details

Table of Contents (18) Chapters

Preface

1. Getting Started with Sass FREE CHAPTER

2. Debugging Your Code

3. Variables, Mixins, and Functions

4. Nested Selectors and Modular CSS

5. Built-in Functions

6. Using Compass

7. Cross-Browser CSS3 Mixins

8. Advanced Sass Coding

9. Building Layouts with Sass

10. Building Grid-based Layouts with Susy and Sass

11. Foundation and Sass

12. Bootstrap and Sass

13. Meeting the Bourbon Family

14. Ruby on Rails and Sass

15. Building Mobile Apps

16. Setting up a Build Chain with Grunt

Index

Installing Sass for command line usage

In this recipe, you will learn how to use Sass on the command line.

Getting ready

You can install Sass on Linux, Mac, and Windows. Sass has been written in Ruby. So, installing Sass requires that you install Ruby first. Ruby is a dynamic open source programming language with its focus on simplicity and productivity. You can read more about Ruby in the Ruby and MongoDB Web Development Beginner's Guide book by Gautam Rege. You will find this book at https://www.packtpub.com/web-development/ruby-and-mongodb-web-development-beginners-guide. If you are using Mac, you are lucky because OS X has Ruby preinstalled. Linux users should use a packages manager, such as Advanced Package Tool (APT), to install Ruby:

 sudo apt-get install ruby-full

Other methods to install Ruby on Linux can be found at https://www.ruby-lang.org/en/documentation/installation/.

Finally, if you are on Windows, RubyInstaller is available. RubyInstaller is a single-click installer that includes the Ruby language, an execution environment, important documentations, and more. You can find RubyInstaller at http://rubyinstaller.org/.

How to do it...

After installing Ruby, you can use the following steps to install Sass on your system:

Open a terminal or a command prompt. Mac users should run Terminal.app and Window users can use the cmd command.
Then, enter the following command in your console:
```
gem install sass
```
The preceding command requires administrator rights for some systems. Use the sudo command for global installations with administrator rights.
Now, you should be able to check your installation by running a command, such as the following one:
```
 sass -version
```
The preceding command should generate the following output:
```
Sass 3.4.13 (Selective Steve)
```

How it works...

RubyGems is Ruby's package manager. Ruby packages, called gems, can easily be installed via the command line and be distributed over the Internet. Many gems are hosted at https://rubygems.org/ and https://github.com/. Also, Sass is distributed as a gem. The Sass gem will not only install Sass, but also install all the dependencies for you. Installing Sass with RubyGems will be easy and straightforward.

The gem install sass command in this recipe should install Ruby Sass and all its dependencies.

There's more...

After installing Sass, you can use the --help option to get a list of the available options and a short instruction on how to use the command-line compiler:

sass --h+elp

Besides the Sass compiler tool, the Ruby Sass gem also installs the sass-convert command-line tool. The sass-convert tool can be used to convert files from the indented syntax into the newer SCSS syntax and vice versa. Notice that you can also use sass-convert to migrate the CSS code Sass or the SCSS code. This will give you some basic nesting when migrating your CSS code.

In the Writing Sass or SCSS recipe of this chapter, you can read about the differences between the original indented syntax and the newer SCSS syntax.

The Ruby on rails apps can also use the Ruby Sass gem to compile the CSS code. Read more about Ruby on rails and Sass in Chapter 14, Ruby on Rails and Sass, of this book.