@extend ⇒ 継承（継承元のスタイルを引き継ぐ。）
例：
style.scss
.box1 {
color: blue;
background-color: white;
}
.box2 {
@extend .box1;
width:300px;
}
@mixin ⇒ ミックスイン（スタイルの集まりを作り、@includeで呼び出す。）
引数が使える。
例：
style.scss
@mixin boxSet {
padding: 15px;
background: #ccc;
color: white;
}
.box3 {
@include boxSet;
}
例：引数使う場合
style.scss
@mixin kadomaru($value){
border-radius: $value;
-moz-border-radius: $value;
}
.box5 {
@include kadomaru(5px 10px);
}
@function ⇒ 関数
計算がメイン。
例：
style.scss
@function half($value){
@return $value / 2;
}
.box6 {
width: half(1000px);
}
#{ } ⇒ インターポレーション。$valueを変数として使いたいため。
インターポレーションに関して
⇩
目指せsassマスター!デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG
例：
style.scss
$value: 20;
@while $value > 0 {
.mt_#{$value} {
margin-top: $value + px;
}
.mb_#{$value} {
margin-bottom: $value + px;
}
$value: $value - 10;
}
切り上げ ⇒ 小数点以下の数字が0以外は切り上げ。
例：
16.1676 ⇒ 17
切り捨て ⇒ 小数点以下の数字が何であっても切り捨て。
例：
16.9017 ⇒ 16
下記サイトがSassで使われる関数を紹介してます。
⇩
compas
cssスプライトを自動で作成してくれる。
⇩
