【Sass】分割した複数のスタイルシートをまとめる(@import)方法

Programming

今回はSassを使用する一番の利点とも言えるファイルの分割記述について紹介します。

Sassではファイルを分割して、後で一つのスタイルシートにまとめる技法があります。それを「Partials」と言います。機能別やレイアウト別にSaccファイルを作成することで従来より非常に見通しのよいコードを記述する事ができ便利な機能になっていますので是非習得して下さい。

基本的なSass技法については以下の記事をみて下さい。

分割した複数のスタイルシートをまとめる方法

まずはSassの分割技法を用いる時のファイルの作成方法について紹介します。

例えば、sassファイルの中に幾つかのファイルを分割して作成したい場合は、以下のようにファイルを作成しておきます。(パスの指定が正しければどんなファイル構造でもOKです。)

└── sass
    ├── parts
    │   ├── _all.scss
    │   └── _body.scss
    │   └── _footer.scss
    │   └── _body.scss
    │   └── _grid.scss
    │   └── _header.scss
    │   └── _responsive.scss
    │   └── _sidebar.scss
    └── style.scss

「parts」ファイルの中に入っている「_all.scss」〜「_sidebar.scss」を分割して各々のスタイルを記述していきます。そして「style.scss」の一つにまとめる事を想定しています。

ファイル名の初めに「 _ 」を付けているのは、分割ファイルがコンパイルされる事を防ぐためです。

コンパイルとは?人間の書いたコードを機械が認識できる形に変換する事です。Sassで言うところのcssへの変換作業です。

コンパイルの方法については、以下の記事の方法がおすすめです。

そして分割されたファイルを「style.scss」にまとめる方法「@import」を使用して以下のように書いていきます。この時に「 _ 」は省略することが出来ます。

// インポート (style.scssに記述)
@import "parts/grid";
@import "parts/all";
@import "parts/header";
@import "parts/body";
@import "parts/footer";
@import "parts/sidebar";
@import "parts/responsive";

上記の記述をした「style.scss」をコンパイルすると「@import」で読み込んだファイルのSassファイルも一緒にコンパイルしてくれて、結果以下のように一つにまとまったスタイルシートが完成します。


以上が「【Sass】分割した複数のスタイルシートをまとめる(@import)方法」でした。

この技法を習得すると「どの辺にサイドバーについての記述したっけ???」「メディアクエリってどこからだっけ??」みたいな迷子な状況になりすらくなります。それゆえに開発がスムーズに進み尚且つ綺麗なコードになるかと思います。

CSSを使っている人は是非試してみて下さい。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました