Skip to content

Installing Sass

Jump to bottom
AtomicPages LLC edited this page Nov 7, 2016 · 1 revision

Sass is a meta-language on top of CSS that's used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable style sheets. sass-lang.com

To paraphrase what the authors of Sass have told us, Sass is a lovely CSS pre-processor that allows for a more dynamic approach to writing style sheets. Sass incorporates basic elements from it's parent language Ruby. Sass offers things like variables, functions, control structures, and mixins. Mixins are similar to functions as we know them except they "return" properties, values, and sometimes entire selectors.

Let's see some Sass!

// using variables
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
	border-color: $blue;
	color:
	darken($blue, 9%);
}
.border {
	padding: $margin / 2;
	margin: $margin / 2;
	border-color: $blue;
}

// nesting to mimic DOM
table.hl {
	margin: 2em 0;
	td.ln { text-align: right; }
}

li {
	font: {
		family: serif;
		weight: bold;
		size: 1.2em;
	}
}

// mixins
@mixin table-base {
	th {
		text-align: center;
		font-weight: bold;
	}
	td, th { padding: 2px; }
}

@mixin left($dist) {
	float: left;
	margin-left: $dist;
}

#data {
	@include left(10px);
	@include table-base;
}

To learn more about Sass, see the links below:

In order to install Sass, we need two things:

  1. Ruby
  2. Ruby Gems

Once these are installed, we are ready to install Sass.

Note: if you are unsure if you have Ruby Gems installed then issue the gem -v command in Terminal or Command Prompt with Ruby. If you see a result then you have it. If your OS complains then you don't and will need to install it.

Installing Sass

Thankfully, installing Sass is very easy using Ruby Gems! Open Terminal or Command Prompt with Ruby:

OS X, Linux, Unix
sudo gem install sass
Windows
gem install sass

We can ensure Sass has been installed successfully by running the following command in our console window:

sass -v

Testing Sass

Now that we have Sass installed let's test it! Copy & paste the following text into a file called style.scss and then return to your console window.

// Code from sass-lang.com
// Variable Definitions
$page-width:    800px;
$sidebar-width: 200px;
$primary-color: #eee;

// Global Attributes
body {
	font: {
		family: sans-serif;
		size: 30em;
		weight: bold;
	}
}

// Scoped Styles
#contents {
	width: $page-width;
	#sidebar {
		float: right;
		width: $sidebar-width;
	}
	#main {
		width: $page-width - $sidebar-width;
		background: $primary-color;
		h2 { color: blue; }
	}
}
#footer { height: 200px; }

Using Sass at the command line

Now that we have our style.scss file we need to navigate to the directory where this is. If you're unfamiliar with directory traversal on your system here are a few good resources to learning about basic BASH and Command Prompt techniques:

Terminal
# navigate to style.scss
$ cd path/to/my/style.scss

# convert to css
$ sass --update style.scss:style.css
Windows Command Line
:: navigate to style.scss
C:\Users\John Doe>cd path/to/my/style.scss

:: convert to css
C:\Users\John Doe>sass --update style.scss:style.css

Note: # and :: are comments and are NOT meant to be typed.

Congrats! You have written and compiled your first Sass script!

For additional information about what options you have using the sass command, run sass --help on in your console window.

Hate Command Line?

Do you hear command line and think, "yuck!" Good news! You have options:

Clone this wiki locally