バカな。CSSに関数などあるはずがない。嘘に決まっておる

関数は便利

コンパイル型なので、コンパイル前のsassの状態は正直やりたい放題うはうはです。
関数も作ったりなんやかんやすることができます。

mixinとinclude

基本設定としてよく使う組み合わせを予め作っておけばそれらを使って便利に組み合わせる事ができます。

mixin

mixinを宣言する事によって、再利用できる部品として扱われます。
mixinしたものには引数をつけることができます。特性として以下があげられます。
後述の例の通り、@minin 【名前】(【引数】){ // 内容 }として記述します。

@mixin 【名前】(【変数】) {
  // CSS内容
}

include

mixinを宣言したものを呼び出す時に使用します。
こちらも後述の通りですが
@include 【名前】(【引数】);
で指定してください。

@include 【名前】(【変数】);

引数をつけることができる
引数にはデフォルト値を指定することができる
名前付きでパラメータを指定することができる
可変引数を渡すことができる

引数をつけることができる

そのままの意味ですが、引数をセットすることにより状況に併せて値を変更することができます。

@mixin widthSet($w) {
  width: $w;
}

引数にはデフォルト値を指定することができる

デフォルト値とは、呼び出し時に引数に値をセットしていない場合適用されるものをさします。

@mixin widthSet($w:10px) {
  width: $w;
}
p {
  @include widthSet(20); // p{ width:20px; }
}
p {
  @include widthSet(); // p{ width:10px; }
}

名前付きでパラメータを指定することができる

名前付き、なんとなくピンと来ないですが、複数の引数の用意があるけど一つだけに入れたいみたいな
そんな状況の時に使うのかな？

@mixin widthSet($w:10px,$color:#ddd) {
  width: $w;
  color:$color
}
p {
  @include widthSet($color:#fff); // p{ width:10px;color:#fff }
}

可変引数を渡すことができる

変な言い方ですが、場合によってはカンマが入ったものを渡さないといけない時があります
そんな可能性がある場合は、この可変引数としてわたしましょう
mixinの引数の所に...(ドット３つ)を指定してあげましょう

@mixin shadow($value...) {
  text-shadow: $value;
}
h2 {
  @include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

独自関数

mixinとは違って、所謂関数を作成することができます。

// 宣言
@function 【名前】(引数){
  @return 戻り値;
}
// 呼び出し
p {
  width: 【名前】(引数);
}
$test : 【名前】(引数);// 戻り値が変数に代入

インポート

インポートを使って別ファイルを読み込む事ができます。
指定するファイル名は拡張子を省略することができますが、同じファイル名で拡張子違いのファイルが存在する場合は
エラーとなります。
test.sass と test.scss のようなパターンです。

@import "【ファイル名】";
// 恐らくどこに記述しても問題はないと思いますが、可読性向上のため、ファイル先頭でまとめたほうがいいかもしれません

パーティシャルファイル

importで使われる事を前提としたファイルとして定義します。
--watch等での自動コンパイル時に、コンパイルされないようになります。
ファイル名先頭に_(アンダーバー)をつけるだけです。
また、importする場合、アンダーバーを省略する事ができますが
これも複数のファイル名が同じになる場合エラーとなります。

拡張

他のセレクタで定義した内容を継承することができます。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}

// ↓コンパイル後↓

.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}

プレースホルダ

継承のみに使いたい場合(つまりコンパイルされたくない場合)は
先頭に【%】を付与します。

%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend %message;
  border-color: green;
}

// ↓コンパイル後↓

.success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}