SASS

・入れ子の使用が可能

ネストと呼ばれる入れ子の構造で記述します。
CSSでは、それぞれのセレクタが独立して記述されていますが、Sassはネストを使い、子要素を波括弧{}で囲うことで、まとめてスタイルを設定することが可能です。
親と子の関係性がわかりやすいので、可読性が高まります。

このように、divの中にh2とpが入っています。
子要素を宣言の中に入れられるため、CSSのようにdiv h2{}というような書き方をしなくて済むのです。

このように「&」を使用することで、セレクタの親要素を取得することが可能です。hoverなどで非常に便利な機能になります。

・変数を利用できる

Sassでは、変数を利用できます。
通常、CSSで変数を使うことはできません。しかし、Sassはローカル変数とグローバル変数を利用することが可能です。例えば、グローバル変数の場合、スタイルシートに横幅のサイズを宣言し、その後セレクタの宣言の中でプロパティに代入することができます。 同じ値をさまざまなプロパティで複数使う場合などで、非常に便利です。また値を変更したい場合も、グローバル変数の数値だけを変更すれば、すべてのプロパティに適応されるため、メンテナンス性も向上します。

・四則演算が可能

Sassでは、四則演算の利用が可能です。
つまり、値を足したり掛けたり、割ったりすることができます。変数と組み合わせることで、便利に利用することができるでしょう。

・関数を使用できる

関数を利用できる点もSassのメリットです。
引数に値を入れることができ、そして処理後の値を返してくれます。 変数は、グローバル変数とローカル変数を使用することができます。
コメントにもあるように、$duplicateがグローバル変数、$widthがローカル変数です。
グローバル変数は、書き込んだCSS内であれば全体に適応される変数で
ローカル変数は、書き込んだセレクタ内のみで適用される変数です。

・ミックスイン・継承による効率化

ミックスインや継承を利用できる点もメリットです。
ミックスインとは、スタイルに引数を持たせることです。つまり、抽象的なスタイルを記述できるので、値を変更しつつ複数の場面で使う設定がある場合には、ミックスインを使うと便利です。
関数と似ていますが、関数は値だけを返します。ミックスインはスタイル自体を返すという点が特徴です。
継承は、引数を持たず使いまわしができるスタイルのことです。同じスタイルを何回も書かなくて済むため、効率的に実装することができるでしょう。