New terms from treehouse – Sass Basics Part 1 – Getting Started with Sass and Variables, Mixins, and Extending Selectors

Getting Started with Sass

What is Sass?

Sass is a CSS language. CSS is a subset of Sass, which means that by writing CSS you’re already writing valid Sass. It just extends CSS. Sass is not an acronym, but there is one for it (syntactically awesome stylesheets).

Screen Shot 2014-11-05 at 4.08.24 PM

A compiler works by taking an input and turning it into an output. Browsers understand CSS, but not Sass. So, Sass gets compiled into CSS. Sass is for developers, and CSS is for the browsers.

Installing and Using Sass

Sass was built with ruby, so you need it to install it if you’re on Windows or Linux. Mac comes with ruby by default, so just open the command line and write gem install sass. The user I was signed in as didn’t have permission to do that, so I had to sudo before it.

Screen Shot 2014-11-05 at 4.20.31 PM

To check if it installed and to see what version you have, enter sass –version.

Screen Shot 2014-11-05 at 4.21.47 PM

We’ll then start by making our first empty test Sass file, which ends in .scss. Then, in the console we write sass, then the file name.

Screen Shot 2014-11-05 at 4.24.28 PM

It gave us nothing, because there was nothing in the file. So, let’s add some stuff to the file and rerun it.

Screen Shot 2014-11-05 at 4.25.50 PM Screen Shot 2014-11-05 at 4.25.53 PM

If you don’t feel comfortable with the command line, the scout app will take care of this for you.

Working with this long term, we want to enter sass –watch ., which will actually create a CSS file for you, and update it every time you update and save your .scss file. So, it compiles Sass while you work.

Screen Shot 2014-11-05 at 4.32.11 PM

Screen Shot 2014-11-05 at 4.33.45 PM

There are different ways to install depending on the language you’re using. There are two versions of Sass, one is LibSass, a more portable version, and the original.

Nesting Selectors

We have a sample site and have set up our scss and css files, using the sass –watch . command from before.

Screen Shot 2014-11-05 at 4.57.29 PM

Let’s say we set up some styles using a class and descendent combinator.

Screen Shot 2014-11-05 at 5.00.58 PM

If the class name were to change, we’d have to go and change each style that had that class name, which could take a while on a huge site.

Screen Shot 2014-11-05 at 5.02.53 PM

With Sass, you can write nested styles, and the compiler will still write valid CSS for you!  This makes it easy to add new styles for a specific point. This is based off the concept DRY (don’t repeat yourself).

Screen Shot 2014-11-05 at 5.04.03 PMTry not to overdo it with nesting. Only go 4 of 5 levels deep at most. Going deeper usually implies you need more classes and id’s in your markup.

Modernizr is a JS library that works well with Sass, which we’ll add to the page.

Screen Shot 2014-11-05 at 5.11.18 PM

Modernizr adds a bunch of classes to your html tag, which allows you to dynamically determine what the browser can and cannot do. This is useful because it lets you write CSS based off that feature.

Screen Shot 2014-11-05 at 5.12.23 PM

Here, if the browser supports css columns, this CSS will be applied and overwrite rules written above it.

Screen Shot 2014-11-05 at 5.14.43 PM

Advanced Nesting

The parent selector feature is represented by an ampersand (&). Below, in the Sass we’ve added a rule with html.csscolumns & as the selector. As you can see in the CSS, this means that what’s written before the &, in this case html.csscolumns, will be put ahead of the other selectors, .blog .entry p, which are represented by the &, in the css. So, we end up with html.csscolumns blog .entry p

Screen Shot 2014-11-05 at 5.40.10 PM

Now let’s say another h1 was added and we wanted to style just that.

Screen Shot 2014-11-05 at 5.42.59 PMScreen Shot 2014-11-05 at 5.43.28 PM

As you can see, it affects all h1’s on the page, and we don’t want that. Normally we’d fix this by using the direct child combinator >. This is supported by sass as well.

Screen Shot 2014-11-05 at 5.44.55 PM

Screen Shot 2014-11-05 at 5.47.15 PM

You could clean it up further by combing the nesting with the styles below.

Screen Shot 2014-11-05 at 5.48.02 PM

The & works with hover states and such as well. Think how much easier this is than having to write out a:hover, a:visited, a:link, etc.

Screen Shot 2014-11-05 at 5.49.20 PM

Finally, by default Sass simulates nesting by indenting parts of you CSS, to give you an idea of how the original Sass looked.

Screen Shot 2014-11-05 at 5.51.23 PM

Variables, Mixins, and Extending Selectors

Defining Variables

You’ll often use a color multiple times in a project. If you wanted to change it, you’d have to change it in all those locations you used it.

Screen Shot 2014-11-06 at 1.37.02 PM

With Sass you can define variables and use them throughout your CSS. They must start with a dollar sign.

Here we have a site already put together with Sass, with some repeating colors.

Screen Shot 2014-11-06 at 1.40.42 PM

To set up variables, write their name, then a colon, then the value, then a semicolon. Then, all you need to do is use that variable name when you need that value. Here, we’ve set up #333 as $primary_color.

Screen Shot 2014-11-06 at 1.43.42 PM

This makes it easy to change this color later.  You can change it in one place, the variable declaration, rather than having to change it each place you need it.

Screen Shot 2014-11-06 at 1.44.46 PM

You can do this for margins as well, pretty much whatever you want. Notice how easy it makes it to change the styles.

Screen Shot 2014-11-06 at 1.47.54 PM Screen Shot 2014-11-06 at 1.48.18 PM

You can actually take a variable and multiply its value, like they did for padding here. In this case the padding is now 7.5px.

Screen Shot 2014-11-06 at 1.49.32 PM

You can also do just normal inline calculations without a variable. It accepts division, subtraction and addition as well.

Screen Shot 2014-11-06 at 1.50.33 PM

We can make variables this way as well. Since we’re using pt units, it will convert them to px for you in the css.

Screen Shot 2014-11-06 at 1.52.15 PM

If you try using ems though, you’ll get an message telling you where the error is.

Screen Shot 2014-11-06 at 1.53.18 PM

Introducing Mixins

Here we have some code that’s getting repeated quite a bit for the border radii.

Screen Shot 2014-11-06 at 2.01.30 PM

To add a mixin, start with @mixin, then the name of the mixin, then curly brackets, in which you put the code you want.

Screen Shot 2014-11-06 at 2.03.40 PM

Then, to use a mixin, in the css rule write @include, then the name of the mixin you want to use, then end it with a semicolon like any other css declaration.

Screen Shot 2014-11-06 at 2.04.53 PM

The final product:

Screen Shot 2014-11-06 at 2.06.09 PM

You can even set up mixins with selectors. Note how Sass auto scoped it so that the a is nested within the .box class for us.

Screen Shot 2014-11-06 at 2.08.03 PM

The Power of Mixins

You can pass arguments into mixins like you would a JS function. You do this by putting parentheses after the name of the mixin when declaring it, then popping in your arguments. So, now whenever this is included, roundy is expecting these two numbers (for #radius-one and #radius-two).

Screen Shot 2014-11-06 at 2.16.43 PM

Since in this example radius-two seems to just be the double of radius-one, we can dry things up even further and only use one argument with a calculation.

Screen Shot 2014-11-06 at 2.18.38 PM

Note that it the arguments you pass in don’t have to be just numbers, you can use other things like colors too.

Screen Shot 2014-11-06 at 2.20.08 PM

Here’re the golden rules for mixins. Also, this color choice looks more pee than gold to me : O

Screen Shot 2014-11-06 at 2.21.36 PM

Extending Selectors

Screen Shot 2014-11-06 at 2.25.29 PM

Let’s say you need to copy some code, like for .bar here, to a new class called menu. In CSS you’d copy and paste like this.

Screen Shot 2014-11-06 at 2.27.20 PM

Or, you could use a mixin like last lesson. But extend is a great directive to solve the same problem. You simply type @extend, then the name of the selector you want to extend, in this case .bar. You can see that in the CSS it basically merged the selectors together.

Screen Shot 2014-11-06 at 2.29.55 PM

Issue that came up when they developed this: People wanted to use more semantic classes like .menu and .nav, based off of .bar, but they ended up with .bar appearing in their css without actually using it. So, they came up with placeholder selectors, which are represented by a % then a name.

Screen Shot 2014-11-06 at 2.33.04 PM

Now, bar is a placeholder selector and doesn’t get printed to our css. The rule of thumb for using mixins vs extends is that mixins are great for arguments and advanced logic, like building a library, while extends are for smaller scale, simpler things where you just want to copy some stuff with no arguments or logic.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s