Sassでは演算を使用して計算や置き換えが
| 演算子 | 対象 |
|---|---|
| 加算(+) | 数値、色、テキスト |
| 減算(-) | 数値、色 |
| 乗算(*) | 数値、色 |
| 除算(/) | 数値、色 |
| 余り(%) | 数値、色 |
演算
<!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のリンク先" />
<title>演算</title>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
</body>
</html>以下のcssとscssは同一デザイン記述になります
Sass
.box1 {
background-color: #bfdd9e;
width: 50px;
}
// 加算
.box2 {
background-color: #56c1db;
width: (40px + 10);
}
// 減算
.box3 {
background-color: #f4af2b;
width: (100px - 50);
}
// 乗算
.box4 {
background-color: #bfdd9e;
width: (10px * 5);
}
// 除算
.box5 {
background-color: #56c1db;
width: (100px / 2);
}
// 余り
.box6 {
background-color: #f4af2b;
width: 110 % 60px;
}css
.box1 {
background-color: #bfdd9e;
width: 50px;
}
.box2 {
background-color: #56c1db;
width: 50px;
}
.box3 {
background-color: #f4af2b;
width: 50px;
}
.box4 {
background-color: #bfdd9e;
width: 50px;
}
.box5 {
background-color: #56c1db;
width: 50px;
}
.box6 {
background-color: #f4af2b;
width: 50px;
}出力結果
box1
box2
box3
box4
box5
box6