【Rails】scssとは

SCSSとは

Sass（Syntactically Awesome Stylesheets）の拡張構文の一つ。
SassはCSSを拡張したプリプロセッサであり、SCSSはその中で特にCSSに近い記法を採用した形式。
CSSの互換性を保ちながら、次のような便利な機能を提供します。

SCSSの特徴

• ネスト構造：コードの親子関係を簡単に記述できる。
• 変数の使用：スタイル全体で使い回し可能な変数が定義できる。
• 再利用可能なパーツ：ミックスインや関数で、コードを再利用できる。
• 演算：スタイルの数値や色を動的に計算可能。

CSS

.container {
  color: black;
}
.container .item {
  color: red;
}

SCSS

.container {
  color: black;
  .item {
    color: red;
  }
}

SCSSにコードを書くのはどんな時？

間違ってcssにコードを書いてしまい、コード自体は合ってるのに変更されないという問題が起きたため、この記事を作成しました。
scssに書く必要があるのはどんな場合なのでしょうか？

CSSとSCSSの記法は似ていますが、下記の場合はSCSSを使用する方が便利です。

1. Bootstrapを使用しているとき

Bootstrap自体はSCSSで構築されており、SCSSを使うことで次のようなメリットがあります：

• カスタマイズが容易：テーマカラーや間隔、フォントなどをSCSS変数で一括設定できる。
• 必要な機能のみをインポート：未使用の機能を除外することでファイルサイズを削減可能。

例: 必要な機能のみをインポート

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/buttons';

2. Webpackerを使用しているとき

Webpackerを使用している場合、CSSやJavaScriptなどのフロントエンド資産を app/javascript にまとめて管理している。
WebpackerはSCSSをネイティブにサポートしているため、SCSSファイルをそのまま使う。