関数は、キーワードからあらかじめ用意された処理を実行することができます。
関数
記法
関数名() {
処理
}
================
関数名(引数) {
引数を使用した処理
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/main.css" />
<title>関数</title>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>以下のcssとscssは同一デザイン記述になります
Sass
@function color($type) {
@if $type == 1 {
@return #bfdd9e;
} @else if $type == 2 {
@return #56c1db;
} @else {
@return #f4af2b;
}
}
.box1 {
background-color: color(1);
}
.box2 {
background-color: color(2);
}
.box3 {
background-color: color(99);
}css
.box1 {
background-color: #bfdd9e;
}
.box2 {
background-color: #56c1db;
}
.box3 {
background-color: #f4af2b;
}出力結果
box1
box2
box3