変数で管理できるとcssはかなりメンテナンス性が向上します。
例えば、カラーコード・線の太さなど色々と変数管理をする事で、一箇所修正で全てに適応可能になります。
変数
記法
$変数名: プロパティ値;
<!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>
</body>
</html>以下のcssとscssは同一デザイン記述になります
Sass
$apple-green-color: #bfdd9e;
$turquoiseーblue-color: #56c1db;
$yamabuki-color: #f4af2b;
$white: white;
.box1 {
background-color: $apple-green-color;
color: $white;
}
.box2 {
background-color: $turquoiseーblue-color;
color: $white;
}
.box3 {
background-color: $yamabuki-color;
color: $white;
}css
.box1 {
background-color: #bfdd9e;
color: white;
}
.box2 {
background-color: #56c1db;
color: white;
}
.box3 {
background-color: #f4af2b;
color: white;
}出力結果
box1
box2
box3