【PR】を含みます。

フロントエンド

【SCSS】演算（+、-、*、/、%）の使い方と実例

SCSS 演算（+、-、*、/、%）の使い方と実例

SCSS（Sass）はCSSをより便利に使えるようにする拡張メタ言語です。

その中でも「演算機能」を活用すると、数値の加減・乗除・余剰を自在に操ることができ、柔軟なスタイル設計が可能になります。

この記事では、SCSSで使用できる基本的な演算（+、-、*、/、%）の使い方と実例を交えて解説します。

SCSSで使える演算の種類

SCSSでは、以下の5種類の演算を使用できます。

演算子説明例
+加算（足し算）

width: 100px + 20px; // 120px

-減算（引き算）

width: 100px - 20px; // 80px

*乗算（掛け算）

width: 50px * 2; // 100px

/除算（割り算）

width: 100px / 2; // 50px

%余剰（余り）

width: 10% % 3; // 1%

実用例：SCSSの演算を活用したコーディング

変数を使った演算

SCSSでは、変数を定義して計算に利用できます。

SCSS
Copy
  1. $base-size: 16px;
  2. $padding: $base-size / 2;
  4. .container {
  5.   font-size: $base-size * 1.5; // 24px
  6.   padding: $padding; // 8px
  7. }

レスポンシブデザインでの活用

calc()を使わずに、SCSSの演算だけでレスポンシブな値を計算できます。

以下のように、SCSSの演算を使いつつ、メディアクエリと相対単位を組み合わせることで、より柔軟でレスポンシブなレイアウトが実現できます。

SCSS
Copy
  1. $columns: 5;
  3. .column {
  4.   // 小さい画面では、各カラムの幅をパーセンテージで指定
  5.   width: (100% / $columns); // 20%
  6. }
  8. @media (min-width: 768px) {
  9.   .column {
  10.     // 大きい画面では、固定幅（例：1200pxコンテナ内の計算値）を用いる例
  11.     width: (1200px / $columns); // 240px
  12.   }
  13. }

明るさ調整用のカラー演算

SCSSの演算は数値だけでなく、カラーの調整にも使えます。

darken()やlighten()などの関数を使うことで、指定した色を指定した割合で暗くしたり明るくしたりすることができます。

例えば、以下のコードでは$base-colorの色を10%暗く（または明るく）する計算を行っています。

SCSS
Copy
  1. $base-color: #f09896;
  2. $darken-color: darken($base-color, 10%); // $base-color を10%暗くする
  3. $lighten-color: lighten($base-color, 10%); // $base-color を10%明るくする
  5. .button {
  6.   background-color: $base-color; // #f09896
  7. }
  8. .button-dark {
  9.   background-color: $darken-color; // #ea6c69
  10. }
  11. .button-light {
  12.   background-color: $lighten-color; // #f6c4c3
  13. }

このように、カラーの演算を活用することで、ベースカラーから派生したバリエーションを簡単に作ることができます。

SCSSの演算を使用するときの注意点

除算の注意点

記事内では分かりやすくするため、除算を/(スラッシュ)表記にしてます。

しかし、/はCSSで区切り文字として扱われることがあり、除算なのか区切り文字なのか区別がつかなくなり、意図しない動作をすることがあります。

そのため、sass:mathモジュールのmath.div()関数を使用することが推奨されます。

以下はその例です。

意図しない動作となる書き方

SCSS
Copy
  1. .content {
  2.   width: 100px / 2; // 100px/2と出力される
  3. }

math.div()関数を使用した書き方

SCSS
Copy
  1. @use 'sass:math';
  2. .content {
  3.   width: math.div(100px, 2); // 50px
  4. }

単位の組み合わせに注意

相対単位（例えばemやrem）と絶対単位（例えばpxやcm）を混ぜるとエラーになります。

絶対単位と絶対単位の計算（例えば10px + 10cm）であれば単位が異なっても計算可能です。

しかし、相対単位と絶対単位の計算（例えば10em + 10px）はエラーになります。

※絶対単位：サイズがはっきり決まっている単位

※相対単位：他の要素や環境のサイズに基づいて決まる単位

まとめ

SCSSの演算機能を活用すれば、スタイルの柔軟性を大幅に向上させることができます。

特に、変数と組み合わせることで、メンテナンスしやすいコードを書くことが可能です。

今回紹介した実用例を参考に、ぜひSCSSの演算を活用してみてください！

Sassを学習するならこの1冊で充分！

アイコン画像

もみじ

HTMLとCSSの知識があれば、Sassについての必要な知識を身に付けることができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容から管理・運用・設計のやり方もこの1冊で学ぶことができます。

-フロントエンド
-