Introduction to Sass and How to Setup with Mac + Coda

thumb_sass

Have you ever heard of “Sass“? Simply put, Sass(Syntactically Awesome Stylesheets) 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. It is much easier to use Sass than you think! Today I will tell you how great Sass is and how to set up with Mac + Coda.

What is Sass?

Basically writing Sass is exactly the same as writing CSS. You just need to start using the new and exciting features such as nesting, variables and so on. And you can create CSS file to compile Sass file. For example, you’ll get “style.css” file after you compile “style.scss”.

What is Sass

However, I will not recommend to learn Sass if you are new to CSS. I will be happy when you remind this post after you learnt a basic CSS.

So, What Will Happen?

Showing the code will be easier to understand than explaining with boring texts, right? Let’s have a look some examples.

Nesting

Sass avoids repetition by nesting selectors within one another. The same thing works with properties.

Sass(.scss)

#main{
    h1{ margin-bottom: 20px }
    p{ font-size:90% }
}

Compile to CSS(.css)

#main h1 { margin-bottom: 20px; }
#main p { font-size: 90%; }

Variables

Use the same color all over the place? Need to do some math with height and width and text size? Sass supports variables using “$” at the first.

Sass(.scss)

$main_color: #3cf;
p{ color: $main_color }

Compile to CSS(.css)

p { color: #33ccff; }

Parent References

What about pseudoclasses, like :hover? There isn’t a space between them and their parent selector, but it’s still possible to nest them. You just need to use the Sass special character “&”. In a selector, “&” will be replaced verbatim with the parent selector.

Sass(.scss)

a{
     font-weight: bold;
     &:hover{
          text-decoration: none;
     }
}

Compile to CSS(.css)

a { font-weight: bold; }
a:hover { text-decoration: none; }

Operations and Functions

You can also modify and combine them using math and useful predefined functions. This allows you to compute element sizing and even coloration dynamically.The standard math operations (+, -, *, /, and %) are supported for numbers, even those with units.

Sass(.scss)

#side{ width: 960px - 650 - 30 }

Compile to CSS(.css)

#side { width: 280px; }

For more tutorials, please see Sass official website.

Let’s Use Sass with Coda

Advantages of Using Mac + Coda

Coda
First of all, you need Ruby to get running. If you’re using Mac OS X, you’ll already have Ruby installed so you don’t have to be afraid of anything. And you don’t need anything but Coda which I love to use for HTML editing because it has Terminal and Plugin for compiling to CSS.

Install Sass

You can install Sass by running code below on your Terminal. That’s all you have to do!

sudo gem install sass

Install Sass

Sass Plugin for Coda

Coda Sass Plug-in
Next, let’s get Sass plugin for Coda to compile .sass file. Download Coda Sass Plug-in and install it by double clicking. Restart Coda and it’s done!

Create a new Sass file and write some example code like I showed you above. .sass file will be compiled to .css file when you press Control + Shift + S key.

And More Useful by Using Zen-Coding

Zen Coding is an editor plugin for high-speed HTML, CSS(or any other structured code format) coding and editing. It would be much faster to code if you use it with Sass, don’t you think? You will need “Tea for coda” to to use zen-coding on Coda. Let’s finish to set up for it first. Please see a nice article: “Zen Coding: A Speedy Way To Write HTML/CSS Code” to understand Zen Coding.

Sass zen coding

Then, set up to use zen coding with Sass file. Download “my_zen_settings.py” file from here first.

Right click on “TEA for Coda.codaplugin” file on Username/Library/Application Support/Coda 2/Plug-ins/ and select “Show Package Contents”. Then put “my_zen_settings.py” file that you downloaded on Support/Library/zencoding. Now you can use Zen Coding with Sass file after you restart Coda!

Also See Great Articles

I told you how to use Sass with Coda, but of course you can use it on Windows and with another text editing app. I’d be glad if you are interested in Sass! :)

Share

Comments