CSSとSCSSの違い
どちらもウェブページのデザインをスタイル設定するために使われる点では同じですが、いくつか違いがあります。cssは「.css」ファイルに記載し、scssは「.scss」ファイルに記載します。
CSS (Cascading Style Sheets)
- 基本的なスタイルシートです。
- シンプルな構造で、直接ブラウザに適用されます。
- 変数やネストなどの高度な機能はありません。
|
1 2 3 |
body { background-color: #f0f0f0; } |
SCSS (Sassy CSS)
- Sass（Syntactically Awesome Stylesheets）というCSSプリプロセッサの一つで、CSSをより効率的に書けるようにした拡張版です。
- 変数、ネスト、ミックスイン、継承など、再利用性や保守性を高める機能が使えます。
- SCSSは、コンパイルされて通常のCSSに変換されます。
|
1 2 3 4 5 6 7 8 9 |
$primary-color: #f0f0f0; body { background-color: $primary-color; nav { background-color: darken($primary-color, 10%); } } |
具体的な使い方
- 共通設定をSCSSにまとめる:
- サイト全体に影響する設定（色、フォント、レイアウト、ブレークポイントなど）をSCSSファイルにまとめます。例えば、
_variables.scssというファイルに変数や共通設定を書きます。
12345// _variables.scss$primary-color: #3498db;$secondary-color: #2ecc71;$font-stack: 'Helvetica, Arial, sans-serif';$breakpoint-mobile: 768px;
- サイト全体に影響する設定（色、フォント、レイアウト、ブレークポイントなど）をSCSSファイルにまとめます。例えば、
- コンパイルして共通CSSファイルを生成:
- SCSSファイルをコンパイルし、
common.cssやglobal.cssのようなファイルを生成します。これが全ページで使用される共通スタイルを管理します。
- SCSSファイルをコンパイルし、
- 特定のスタイルをCSSに分ける:
- ページやコンポーネントごとのスタイルは、従来通り個別のCSSファイルに書いても問題ありません。
- HTMLに共通CSSと個別CSSをリンク:
- 生成された共通CSS（例:
common.css）と、個別のCSSファイルをHTMLで読み込みます。
- 生成された共通CSS（例:
例
SCSS
|
1 2 3 |
// _variables.scss (SCSS) $primary-color: #3498db; $secondary-color: #2ecc71; |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
// common.scss (SCSS) @import 'variables'; body { font-family: $font-stack; color: $primary-color; } a { color: $secondary-color; } |
HTMLファイルへの記載
|
1 2 |
<link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="page-specific.css">り |
利点
- 一貫性: 変数や共通設定をSCSSにまとめることで、サイト全体でスタイルの一貫性が保たれます。
- メンテナンスが容易: 色やフォントなどを一箇所で管理できるため、サイト全体のデザイン変更が容易になります。
- 効率性: ページごとのスタイルを通常のCSSで管理しつつ、共通部分はSCSSで効率的に設定できます。
コンパイルとは
「コンパイル」とは、プログラムのコードを他の形式に変換するプロセスを指します。具体的には、SCSSの場合、開発者が書いたSCSSファイルをコンパイラが処理し、ブラウザが理解できる通常のCSSファイルに変換することを意味します。
SCSSのコンパイルの流れ
- SCSSファイルを作成: 開発者が変数やネストなどの機能を使ってSCSSファイルを作成します。
- コンパイラが変換: コンパイラ（Sassなどのツール）がSCSSファイルを読み込み、それをCSSファイルに変換します。
- CSSファイルが生成される: 変換されたCSSファイルが、ウェブページで使用されます。
SCSSファイル (styles.scss):
|
1 2 3 4 5 |
$primary-color: #3498db; body { background-color: $primary-color; } |
コンパイル後のCSSファイル (styles.css)
|
1 2 3 |
body { background-color: #3498db; } |
SCSSの利点とは？
コンパイルさせるのは、手間になるような気がする。最初からcssで書けばいいじゃん、と思ってしまう。いったいどこが利点なの？
コンパイルは一見手間に感じるかもしれませんが、SCSSを使用する利点が多いため、その手間を上回るメリットがあります。
SCSSの利点
- 再利用性の向上:
- 変数を使えるので、同じ色やサイズを複数箇所で使うとき、変数一つを変更すれば全体が更新されます。
- 例:
$primary-color: #3498db;のように変数を使い回しできる。
- コードの可読性と保守性が向上:
- ネストを使って、親子関係を整理できます。これにより、関連するスタイルが近くにまとまって見やすくなります。
- CSSの記述量削減:
- ミックスインや継承などを使って、重複したコードをまとめることができます。これにより、コードの量が減り、保守が楽になります。
- 例: ボタンのスタイルを共通化するミックスインなど。
- メンテナンスが容易:
- 大規模なプロジェクトでは、スタイルシートが巨大になりがちです。SCSSを使えば、コードをモジュール化して整理できるので、後から変更が必要になったときでも対応しやすくなります。
SCSSが役立つ場面
- 複雑なプロジェクトやデザイン:
- プロジェクトが大きくなり、スタイルの数が増えてくると、SCSSのネスト機能や変数の利用がコードの管理に役立ちます。
- 再利用性:
- 同じ色やスタイルを他の場所でも使う場合、SCSSの変数を使えば、変更が必要なときに一箇所を変更するだけで済みます。
- 階層構造の整理:
- 多階層の構造や特定のコンポーネントにスタイルを適用する際、ネストはコードをわかりやすくします。
コンパイルの手間を減らす方法
- 自動化ツールの利用:
- GulpやWebpackなどのビルドツールを使うことで、ファイルが変更されるたびに自動でコンパイルが行われます。これにより、手動でコンパイルする手間がなくなります。
- Visual Studio Code などのエディタでも、SCSSの変更を検知して自動でコンパイルするプラグインが利用できます。
- 一度の設定で継続利用:
- 一度環境を整えると、コンパイルの手間はほぼ気にせず、日常的に利用できます。SCSSの柔軟性を日常的に受けられます。
まとめ
- CSS: シンプルでそのまま使用できるが、複雑なプロジェクトでは管理が難しい。
- SCSS: より効率的に書けるが、コンパイルが必要。大規模なプロジェクトに向いている。
簡単に言うと、SCSSはCSSをもっと便利にするためのツール、ということです。
コンパイルは、初めてだと手間に感じるかもしれませんが、長期的には保守性や効率が向上するため、その手間は十分に見返りがあります。特に、プロジェクトが大きくなるほど、SCSSの利点が顕著になります。どちらを使うかはプロジェクトの規模やニーズに応じて判断すると良いでしょう。
SCSSで共通設定を管理し、その他のスタイルを従来のCSSで書くアプローチは、サイト全体のスタイルを効率的に一貫性を持たせるのに非常に有効です。この方法を使うと、保守がしやすく、拡張性も高いサイトを構築できます。
コメント