ホーム>技術

Sass(SCSS)で@importを使用して外部のSCSSファイルを取り込む方法

目次

おすすめ

これからSassを学んでみたい!という方にぴったりな本です。
Sassの概要や文法はもちろん、導入方法やフレームワークまで幅広く紹介されています。
中でも、現場で使える実践テクニックは必見です!
ぜひ一度手に取ってみてください。

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか?
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく!

CodeCamp

実行環境

OSmacOS Catalina 10.15.7
Sass1.34.0

開発および実行環境がない方は、以下の記事を参考に構築してください。

Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法

Sass(SCSS)で@importを使用して外部のSCSSファイルを取り込む方法

今回は、Sass(SCSS)で@importを使用して外部のSCSSファイルを取り込む方法をご紹介します。

Sass(SCSS)で@importを使用して外部のSCSSファイルを取り込む方法は以下のとおりです。

  1. 取り込みたいSCSSファイルを作成する
  2. @importでSCSSファイルを取り込む
  3. 内容を確認する

取り込みたいSCSSファイルを作成する

はじめに、取り込みたいSCSSファイルを作成します。
使用するサンプルのディレクトリ構成は以下のとおりです。

import/
 ├ setting
 │ └ _config.scss
 ├ _button.scss
 ├ import.scss
 ├ import.css
 └ ...
ヒント

SCSSファイル名の頭に “_” をつけると、スタイルのスニペットファイルとして扱われます。
これをSassではパーシャルと呼びます。パーシャルはCSSファイルに出力されません。

今回は、色を指定する「_config.scss」とボタンのスタイルを指定する「_button.scss」を作成します。

$color-red: red;
$color-blue: blue;
@mixin button($bg-color) {
  background-color: $bg-color;
  border: 0;
  border-radius: 100%;
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}

.button_error {
  // _config.scssで指定した$color-redを使用
  @include button($color-red);
}

.button_info {
  // _config.scssで指定した$color-blueを使用
  @include button($color-blue);
}

変数や@mixinについては、以下の記事を参考にしてください。

Sass(SCSS)の基本構文5選
Sass(SCSS)で@mixinと@includeを使用してスタイルを再利用する方法

@importでSCSSファイルを取り込む

次に、@importを使用して作成したSCSSファイルを取り込みます。
_config.scssで指定されている色を_button.scssで使用している為、_button.scssを_config.scssよりも先に取り込むとコンパイルエラーとなります。

@import "setting/_config";
@import "_button";

// コンパイルエラー
// @import "_button";
// @import "setting/_config";

内容を確認する

最後に、コンパイルして作成されたCSSファイルの内容を確認します。

sass import.scss:import.css
.button_error {
  background-color: red;
  border: 0;
  border-radius: 100%;
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}

.button_info {
  background-color: blue;
  border: 0;
  border-radius: 100%;
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}

お疲れさまでした

Sass(SCSS)で@importを使用して外部のSCSSファイルを取り込む方法をご紹介しました。
少しでも参考になれば幸いです。

どんな記事が読みたいですか?

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!