## はじめに

Sass を使っていると、次のような警告が表示されることがあります。

```
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
```

これはエラーではありませんが、将来的に使えなくなる機能であることを知らせる警告です。
Sass の公式コンパイラである Dart Sass では、@import が非推奨となり、3.0.0 で削除される予定です。
この記事では、なぜ @import が廃止されるのか、そしてどのように対応すればよいのかをわかりやすく解説します。

## なぜ @import は廃止されるのか？

**1. グローバルスコープの問題**

```scss
@import "variables";
```

このように書くと、読み込んだファイル内の変数や mixin がすべてグローバルに展開されます。

その結果、

- 名前の衝突が起こりやすい
- プロジェクトが大きくなると管理が難しい

といった問題が発生します。

**2. 重複読み込みの可能性**

同じファイルを複数回 @import すると、CSS が重複して出力される場合があります。
意図しないスタイルの増加につながることもあります。

**3. モジュール設計に適していない**

現在の開発では、ファイルごとに役割を分ける「モジュール設計」が一般的です。
しかし @import には名前空間の仕組みがなく、この考え方に合っていません。

## これからは @use / @forward を使う

新しい書き方は @use です。

```scss
@use "variables";

body {
  color: variables.$primary-color;
}
```

@use を使うと、自動的に名前空間が付与されます。
そのため、どのファイルの変数なのかが明確になります。

### 名前空間のカスタマイズ

実務では、名前空間を短くしたり、省略したりすることがよくあります。

**1. as でカスタマイズ**

```scss
@use "variables" as vars;

body {
  color: vars.$primary-color; // 短縮できる
}
```

**2. as * でグローバル展開**

```scss
@use "variables" as *;

body {
  color: $primary-color; // 名前空間なしで使える
}
```

`as *` を使うと、名前空間なしで変数を使えますが、
名前の衝突リスクがあるため、慎重に使う必要があります。

## @forward とは？

```scss
@forward "variables";
```

@forward は、他のファイルにまとめて公開したいときに使います。
共通スタイルやライブラリ構成で便利です。

### @use と @forward の違い

- **@use** は、そのファイル内で使うために読み込む
- **@forward** は、他のファイルに再公開するために読み込む

### 具体的な利用例

例えば、複数の設定ファイルをまとめる `_index.scss` を作る場合：

**ファイル構成**

```
styles/
  ├── _variables.scss
  ├── _mixins.scss
  ├── _functions.scss
  └── _index.scss
main.scss
```

**各ファイルの内容**

```scss
// styles/_variables.scss
$primary-color: #3498db;
$font-size: 16px;
```

```scss
// styles/_mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

```scss
// styles/_functions.scss
@function double($value) {
  @return $value * 2;
}
```

**@forward でまとめる**

```scss
// styles/_index.scss
@forward "variables";
@forward "mixins";
@forward "functions";
```

**メインファイルで使う**

```scss
// main.scss
@use "styles"; // _index.scss を読み込む

body {
  color: styles.$primary-color; // variables の内容にアクセス
  font-size: styles.double(8px); // functions の内容にアクセス
  
  .container {
    @include styles.flex-center; // mixins の内容にアクセス
  }
}
```

**@forward を使わない場合との比較**

```scss
// @forward を使わない場合
@use "styles/variables";
@use "styles/mixins";
@use "styles/functions";

body {
  color: variables.$primary-color;
  font-size: functions.double(8px);
  
  .container {
    @include mixins.flex-center;
  }
}
```

@forward を使えば、複数のファイルを 1 つにまとめて公開でき、
インポート文を減らしてコードをシンプルに保てます。

## 既存プロジェクトの対応方法

**1. @import を @use / @forward に変更**

自分のファイルで使う場合は `@use` を使います：

```scss
@import "variables";
```

⬇

```scss
@use "variables";
```

他のファイルに再公開する場合は `@forward` を使います：

```scss
// _index.scss
@import "variables";
@import "mixins";
```

⬇

```scss
// _index.scss
@forward "variables";
@forward "mixins";
```

**2. 変数の書き方を修正**

```scss
color: $primary-color;
```

⬇

```scss
color: variables.$primary-color;
```

このように、ファイル名を付けて参照します。

## まとめ

@import がなくなるのは、ただのルール変更ではありません。
Sass が「モジュール」という考え方にしっかり変わるための、大事なステップです。

@use / @forward を使うことで、

- コードを直しやすくなる
- 同じコードを何回も読みこまなくてよくなる
- 変数やファイルの使う場所がはっきりする

という良い点があります。

これからの Sass を、もっと安全でわかりやすく使うために、@use / @forward を使うことをおすすめします。

large_eyecatch.jpg

medium_eyecatch.jpg

small_eyecatch.jpg

thumbnail_eyecatch.jpg

eyecatch.jpg

Sass の @import は廃止へ — Dart Sass 3.0.0 に向けた対応方法

## はじめに

Gulpは、フロントエンド開発の作業を効率化するための自動化ツールです。ファイルを一つひとつ手作業で処理する代わりに、Gulpを使えば、様々なタスクを自動で実行できるため、時間を大幅に節約できます。さらに、CSSを効率よく管理するためにSassという拡張機能を導入することで、コードの見やすさが向上し、メンテナンスもしやすくなります。

この記事では、Gulpの基本的な導入方法から、Sassを使った開発の進め方までを解説します。

## 1. Gulpとは？

Gulpは、開発作業を自動化するための「タスクランナー」です。
手動で行うと時間がかかる以下のような処理を、簡単なコマンドで自動実行できるのが特徴です。

* Sass/LESSファイルのCSSへの自動変換
* JavaScriptやCSSの圧縮・結合
* ファイルの変更監視
* ローカルサーバーの起動やブラウザの自動リロード
* 画像の最適化 など
  
Gulpを使えば、作業の効率が上がり、開発時間を短縮できます。

## 2. 環境準備
### 2.1 事前準備

まず、Gulpを使用するために、Node.js をインストールします。

* Node.js（[公式サイト](https://nodejs.org/en)からインストール）
  
インストール後、以下のコマンドでバージョンが確認できます。

```
node -v
```

![](https://cont.sterfield.co.jp/uploads/img01_6befb058cd.png) 
  

### 2.2 プロジェクトの初期化

プロジェクトのディレクトリで以下のコマンドを実行し、package.json を自動生成します。
```
npm init -y
```
これで、プロジェクトディレクトリに package.json が作成されます。

 ![](https://cont.sterfield.co.jp/uploads/img02_a439d94563.png) 

## 3. Gulpのインストール
プロジェクトのローカルにGulpをインストールします。
```
npm install gulp --save-dev
```
これで　node_modules フォルダと package-lock.json が作成され、package.json の "devDependencies" に Gulp が追加されます。

 ![](https://cont.sterfield.co.jp/uploads/img03_420bdf6b5b.png) 

## 4. Gulpfileの作成
次に、プロジェクトのルートディレクトリに gulpfile.js を作成し、基本的なタスクを設定します。
```
const gulp = require('gulp');

gulp.task('default', function() {
  console.log('Gulp is running!');
});
```

## 5. Sassの導入
以下のコマンドで、Sassをコンパイルするための gulp-sass と sass をインストールします。
```
npm install --save-dev gulp-sass sass
```

## 6. Sassコンパイルタスクの設定
以下のコードを gulpfile.js に追加し、SassファイルをCSSに変換するタスクを追加します。
```
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('dev_src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass'));
```

## 7. ディレクトリ構造（例）
```
my-project/
│
├── dev_src/                 ← ソースファイルを格納するフォルダ
│   ├── files/               ← 静的ファイルやアセットを格納
│   │   └── assets/          ← 画像やフォントなどのリソース
│   │       └── images/      ← 画像ファイル
│   ├── pug/                 ← Pugテンプレートファイルを格納
│   │   └── index.pug        ← メインのPugファイル
│   └── scss/                ← Sassファイルを格納
│       └── style.scss       ← メインのSassファイル
├── gulpfile.js              ← Gulpのタスク設定ファイル
├── package.json             ← プロジェクトの設定情報
└── package-lock.json        ← インストールしたパッケージの依存関係
```

## 8. Sassファイルの作成
dev_src/scss/style.scss に以下のコードを追加します:
```
$primary-color: #333;

body {
  color: $primary-color;
}
```

## 9. 動作確認
以下のコマンドを実行して、Gulpを起動します。
```
 npx gulp
```

## 10.　CSS 内容の確認

Gulpを実行した後、dist/フォルダにはコンパイルされたHTMLやCSSファイルが生成されます。具体的には、以下のようなファイルが出力されます。
```
my-project/
│
├── dist/               ← コンパイルされたHTMLやCSSが出力される
│   ├── index.html      ← Pugから生成されたHTMLファイル
│   └── style.css       ← Sassから生成されたCSSファイル
├── dev_src/
│   ├── files/
│   │   └── assets/
│   │       └── images/
│   ├── pug/
│   │   └── index.pug
│   └── scss/
│       └── style.scss
├── gulpfile.js
├── package.json
└── package-lock.json
```
特に、dist/style.cssの中身が以下のようになっていれば、Sassから正常にコンパイルされていることが確認できます。
```
body {
  color: #333;
}
```

## 11. まとめ

これで、Gulpを使ったプロジェクトのセットアップとSassファイルのコンパイルの手順が完了しました。Gulpを使うことで、Sassのコンパイルやファイルの変更を自動で監視できるようになり、開発の効率が上がります。

**他にもできること**

Gulpを使用すると、以下のような他のタスクも簡単に自動化できます。

* JavaScriptの圧縮と結合

  gulp-uglify や gulp-concat を使って、JavaScriptファイルを圧縮し、一つにまとめることで、読み込み時間を短縮できます。

* CSSの圧縮

  gulp-clean-css を利用して、生成されたCSSファイルを圧縮し、ファイルサイズを小さくできます。

* 画像の最適化

  gulp-imagemin を使用して、画像ファイルのサイズを削減し、ページの読み込み速度を向上させることが可能です。

これらの機能を活用することで、さらに開発がスムーズになります。Gulpには他にも多くの便利な機能がありますので、自分のプロジェクトに合ったタスクを見つけて、効率的なフロントエンド開発を進めてみてください。

## 参考
* https://ics.media/entry/3290/
* https://stand-4u.com/css/sass/setup_gulpsass.html

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Sass

2026/02/19

2024/10/25