演算

演算とは？

演算とは、数値やその他のデータに対して計算を行うことを指します。
Sassでは、演算を使用して、数値や色を計算したり、動的に値を設定したりすることができます。
これにより、スタイルシート内で柔軟に調整を加えることができ、効率的なデザインが可能になります。

主に以下の演算を使うことができます。

これらの演算を使うことで、数値やサイズ、色などのプロパティを動的に計算し、スタイルの調整を簡単に行うことができます。

加算（+）

下記の例では、$widthと$paddingを足して、120pxの幅を計算しています。
```
$width: 100px;
$padding: 20px;
.container {
  width: $width + $padding;  // 100px + 20px = 120px
}
```
減算（-）

下記の例では、$line-heightから$font-sizeを引いた結果、8pxの高さを計算しています。
```
$font-size: 16px;
$line-height: 24px;
.text {
  height: $line-height - $font-size;  // 24px - 16px = 8px
}
```
乗算（*）

下記の例では、$base-sizeに$multiplierを掛け算して、32pxのフォントサイズを計算しています。
```
$base-size: 16px;
$multiplier: 2;
.button {
  font-size: $base-size * $multiplier;  // 16px * 2 = 32px
}
```
除算（/）

下記の例では、$container-widthを$columnsで割って、300pxのカラム幅を計算しています。
```
$container-width: 1200px;
$columns: 4;
.column {
  width: $container-width / $columns;  // 1200px / 4 = 300px
}
```
モジュロ（剰余演算、%）

下記の例では、$resultの値は1になります。
```
$number: 10;
$result: $number % 3;  // 10 ÷ 3 の余り = 1
```

関数を使用した色の操作

lighten()（色を明るくする）

$base-color: #3498db;
$brighter-color: lighten($base-color, 20%);  // 20%明るくする

darken()（色を暗くする）

$base-color: #3498db;
$darker-color: darken($base-color, 20%);  // 20%暗くする

adjust-hue()（色相を変更する）

$base-color: #3498db;
$shifted-color: adjust-hue($base-color, 45deg);  // 色相を45度変更

mix()（2つの色を混ぜる）

$color1: #3498db;
$color2: #e74c3c;
$mixed-color: mix($color1, $color2, 50%);  // 2色を50%ずつ混ぜる

rgba()（色に透明度を加える）

$base-color: #3498db;
$transparent-color: rgba($base-color, 0.5);  // 透明度50%の色

以上が、「演算」についての説明でした。
これまでSCSSの追加機能について学んできましたが、難しく感じる方もいるかもしれません。
SCSSの追加機能は効果的に活用できますが、まずは基本的な記述をしっかり理解し、その上で活用するようにしましょう。

また、「柔軟なスタイルの定義方法」のステップも全て完了となります。
引き続き、別のステップも進めていきましょう。