有些程式語言可以建立函式、設定參數與預設值，之後要用的時候再呼叫、視情況改變參數的設定值。用中文撰寫偽代碼如下：
1link建立函式 函式名稱() {
2link 運算結果 = 一些運算;
3link}
4link建立函式 函式名稱(宣告變數 參數=預設值) {
5link 運算結果 = 應用參數的一些運算;
6link}
7link
8link呼叫函式();
9link呼叫函式(參數的設定值);
@mixin 語法可以把一堆 CSS 設定放在一起並命名，之後利用 @include 語法和名字就能重複使用 CSS 設定，還可以傳入變數和預設值，類似前述的函式。如果參數的設定值有依序排列的話可以不寫參數名稱。用中文撰寫偽代碼如下：
1link@mixin 混合名稱() {
2link 一些 CSS 設定;
3link}
4link@mixin 混合名稱($變數名稱, $變數名稱: 預設值) {
5link 應用變數的一些 CSS 設定;
6link}
7link
8link選擇器 {
9link @include 混合名稱;
10link}
11link選擇器 {
12link @include 混合名稱(設定值, $變數名稱: 設定值);
13link}
@mixin 加上參數還可以加上預設值、@include 決定要修改哪些參數還有各參數要用什麼設定值，概念上來說就很像是物件導向程式設計 (Object Oriented Programming) 的多載 (Overload)。編譯之後 @include 的位置會被換成 @mixin 的內容。
舉例如下：
1link@mixin title {
2link font-size: 36px;
3link font-weight: 700;
4link}
5link@mixin text($font-weight, $color: black) {
6link font-size: 18px;
7link font-weight: $font-weight;
8link color: $color;
9link
10link.title {
11link @include title;
12link}
13link.text {
14link @include text(300);
15link}
16link.text-bold {
17link @include text(700, $color: darkGray);
18link}
1link.title {
2link font-size: 36px;
3link font-weight: 700;
4link}
5link.text {
6link font-size: 18px;
7link font-weight: 300;
8link color: black;
9link}
10link.text-bold {
11link font-size: 18px;
12link font-weight: 700;
13link color: darkGray;
14link}
在 @mixin 的下層寫上 @content, 在 @include 的下層寫一些 CSS 設定，編譯之後 @include 的位置會被換成 @mixin 的內容，@content 的位置會被換成 @include 下層的 CSS 設定。
舉例如下：
1link@mixin mobile {
2link @media (max-width: 767px) {
3link @content;
4link }
5link}
6link
7link.header {
8link @include mobile {
9link height: 60px;
10link }
11link}
1link@media (max-width: 767px) {
2link .header {
3link height: 60px;
4link }
5link}
撰寫 SASS 或 SCSS 時可以注意是否有以下的錯誤：