SCSSの基本構文6 - 別のSCSSのファイルの操作

Webサイト制作

SCSS

基礎

投稿日時 : 2024/11/26 更新日時 : -

自作したSCSSファイルをライブラリのようにして自分専用のCSSのデザインファイルとして使いたくはならないだろうか。技術者がたくさんのスタイルを定義し作成したSCSSファイルはパーシャル(部分的)として管理している。

この記事ではSCSSのパーシャルについて解説する。

君達がもしSCSSをパーツ化したい場合、例えば下記のようなファイル構成にする事も考えられる。

・色に関するSCSS
・ボタンに関するSCSS
・アニメーションに関するSCSS

SCSSで出力した多くのCSSを一つ一つ下記のように読み込むのは非効率だろう。


<head>
    <link rel="stylesheet" href="/css/color.css">
    <link rel="stylesheet" href="/css/button.css">
    <link rel="stylesheet" href="/css/animation.css">
</head>

そこでパーシャルを使う。

SCSSでパーシャルのアンダーバー(_)でファイル管理をする

まずファイル名の前に_(アンダーバー)を付けてパーシャルファイルであると示す。

・_color.scss
・_button.scss
・_animation.scss

ファイルの中身は通常通りSCSSやCSSを書くのだが、そのファイルは単体では使えない。それらのファイルを使うには一つのファイルにまとめる作業が必要だ。例えばmain.scssファイルを作成して、中に読み込みたいファイルを記す。


@use 'color';
@use 'button';
@use 'animation';

@useで読み込むファイルを指定する。注意するべき点は_(アンダーバー)はいらない。

VSCodeでパーシャルファイルをひとまとめにする方法

VSCodeでLive Sass Compilerの拡張機能があるならそのままWaching...状態でmain.scssファイルを保存すると、main.cssにひとまとめにCSSが出力されている事が確認できるだろう。

自分専用のCSSライブラリを作るのも面白いし、再利用性があるので利便性が利く。パーシャルファイルの事を知っていたら多くのSCSSで開発されたSCSSのライブラリの中にある@useや_(アンダーバー)ファイルの意味が分かるのでそのコードがひとまとめに出力したい意図も理解できるだろう。