How To Put Some Sass In Your Life

~A Beginners Guide To Sass ~

Sass stands for Syntactically Awesome Stylesheets Sass OR it could mean: Attitude, mouthing off, not backing down, putting the smack down, opening a can of Bruce Lee

So SASS is basically a really neat, organized, and smarter way to write CSS. You would write Sass almost the same way as you would write CSS except without the curly braces and semi-colons.

CSS vs. SASS

You can also nest in 2 different ways: Selector nesting and property nesting.

All hyphenated selectors are supported

In this image, I’ve nested both ways. I nested the selector topnav under the ul selector and I’ve nested #logo and .name under the topnav selector. This makes it so you don’t have to repeat yourself as much when styling. I also nested properties of fonts. Instead of writing out font-family, font-size, and font-weight, I was able to nest it under the word font to make it cleaner and easier. If I had to write the above in CSS it would look like this:

In Sass you can:

  1. Declare variables. This is beneficial for changing something as simple as colors in your stylesheet. To declare a variable you would write a $ followed by the name of the variable. For example, at the top of your Sass file, you can declare all the variables for the colors on your page like so: $red: #C00000 The cool thing is that Sass has built-in functions like darken and lighten so you can easily change the colors on your stylesheet like so:

2. Perform mathematical operations like add and subtract in order to change things easily like color or font size. You can also subtract or add a HEX value to a color to change it. Sass has a handful of standard math operators like +, -, *, /,%, ==, and !=. You can do math in your stylesheet instead of getting out your calculator!

3. Reuse whole blocks of Sass code by creating a mixin. You can pass arguments and specify default values through mixins too!

If you do not specify a border-radius like I did in h1, the default border-radius would be 5px as defined in the mixin

4. Allow a selector to inherit all the styles from another selector but using the Sass keyword extend! Sass really helps reduce repetition!

@extend keyword used to essentially grab all the styling for #logo and put it in .nam

In CSS, it would look like this. Notice how many times I repeated myself!

I had to repeat the styling for font-family, font-size, and font-weight!

Try Sass Today Online!

You can also try Sass online without installing it on your local machine.

Sass vs. SCSS (sassy CSS)

SCSS is an extension of the syntax of CSS. Every valid CSS stylesheet is a valid .scss file but is enhanced with Sass features. Sass is an older syntax that just provides a more concise way of writing CSS using a .sass extension.

Converting CSS to Sass

You start using Sass in your exisiting projects by using sass-convert.

Enter the folder you want to convert in your terminal and type in sass-convert --from css --to sass -R . where -R means recursively and . means the current directory.

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Cool resources on Sass+SCSS

Now, get your sassy on!