超ざっくりDart-sass

どうも、くまだです。

Web制作でよく使う言語の一つに、Sass(サス)というのがあります。ファイルを読み込むのによくつかっていた@importが2022年10月ごろにサポート終了ということで、それへの対応をしなければなりません。

そこで使うのがDart-Sassというもので、@importの代わりに別のものを使用して2022年10月までに備えておきます。

ここでは超ざっくり、最低限のものだけ書きます。

Dart-sassの環境構築

dart-sassへの環境構築はいくつかあります。

  • gulpやwebpackを使う
  • VSCode拡張機能の「DartJS Sass Compiler and Sass Watcher」を使う

今回は超ざっくりなので、簡単に導入できる拡張機能を使用します。

ちなみに、gulpやwebpackはSassのコンパイル機能以外にもさまざまな機能を使うことができます。拡張機能は簡単に導入すればできますが、コンパイルすることしかできません。

gulpやwebpackは、コマンドひとつで画像圧縮からコンパイルからプロパティ並べ替えからさまざまなことができるようになりますが、今回は割愛します。

拡張機能は以下のものを使います。

Dart-sass拡張機能

LiveSassなど他にコンパイルするための拡張機能を使用している場合は、そちらの機能は無効化するなり、アンインストールしたほうがいいかもしれません。(どちらにしろ、2022年10月移行はSassのimportが廃止になるのでいらなくなるかも)

LiveSassの場合は、VSCode最下部のWatch Sassをonにするのですが、今回紹介した拡張機能の場合は、インストールしたら、ファイルを保存するだけで使えます。

拡張機能をいれたら、あとはDart-sassの書き方をするだけです。

Dart-sass @use の使い方

Dart-sassの拡張機能をいれたら、VSCodeのsetting.jsonに、以下のような記述をしておきます。

// settings.json
  "dartsass.targetDirectory": "css/",
  "dartsass.autoPrefixBrowsersList": [
    // dart-sass拡張 ベンダープレフィックス
    "> 1%",
    "last 2 versions"
  ],
  "dartsass.outputFormat": "cssonly",

コンパイルしたCSSにベンダープレフィックスをつけるのと、CSSフォルダにCSSファイルを出力させる設定、min.cssファイルを出力させない設定です。

Dart-sassでは@useや@forwardsなどを使っていきます。逆にimportが使えなくなります。例えば、以前のSassの書き方であれば、importを使うと以下のような書き方になります。

ファイル構造は以下のような構成。

まず、html。フォントファミリーは適当に選びました。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@400;500;700;800&display=swap" rel="css/stylesheet"> 
<body>
  <div class="container">
    <div class="box">
      <p class="box_text">テストだよ</p><!-- /.box_text -->
    </div><!-- /.box -->
    <div class="box">
      <p class="box_text">テストだよ</p><!-- /.box_text -->
    </div><!-- /.box -->
    <div class="box">
      <p class="box_text">テストだよ</p><!-- /.box_text -->
    </div><!-- /.box -->
    <div class="box">
      <p class="box_text">テストだよ</p><!-- /.box_text -->
    </div><!-- /.box -->
    <div class="box">
      <p class="box_text">テストだよ</p><!-- /.box_text -->
    </div><!-- /.box -->
    <div class="box">
      <p class="box_text">テストだよ</p><!-- /.box_text -->
    </div><!-- /.box -->
  </div><!-- /.container -->
</body>

</html>
@import 'color';
@import 'font';
@import 'mixin';


.container {
  @include flex();
  width: 90%;
  margin: auto;
}

.box {
  width: 30%;
  height: 200px;
  border: 1px solid $cRed;

  &_text {
    color: $cBlue;
  }
}

以下は、それぞれ読み込むファイルです。

〇 _color.scss

// _color.scss
$cRed : red;
$cBlue : blue;

〇 _font.scss

// _font.scss
body {
  font-family: 'Kaisei Tokumin', serif;
}

〇 _mixin.scss

// _mixin.scss 
@mixin flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

これをDart-sass方式、@useに書き換えると、こんな感じ。

// style.scss
@use 'color';
@use 'font';
@use 'mixin';

.container {
  @include mixin.flex();
  width: 90%;
  margin: auto;
}

.box {
  width: 30%;
  height: 200px;
  border: 1px solid color.$cRed;

  &_text {
    color: color.$cBlue;
  }
}

いつもどおり@includeを使うときは、@importのときだとそのまま使えますが、@useの場合はそのままでは使えないみたいです。

上記の例だと、@importでやっていた場合は、@include flex();みたいな感じで使えましたが、@useのときは、@include mixin.flex();みたいな感じで呼び出し元のファイル名を記述しなければいけないみたいです。(面倒)

なので、colorで使っている変数のところも、color.$cRed;みたいな感じで使わなければなりません。この記述だと長いので、それぞれの@useに名前をつけることができます。

@use  “ファイル名” as 名前;

みたいな。これを実際使うときは、以下のような感じで使います。

@use 'color' as c;
@use 'font' as f;
@use 'mixin' as m;

.container {
  @include m.flex();
  width: 90%;
  margin: auto;
}

.box {
  width: 30%;
  height: 200px;
  border: 1px solid c.$cRed;

  &_text {
    color: c.$cBlue;
  }
}

呼び出すファイルが増えてくれば、@useで増やしまくって呼び出すことができます。ただ、これだとファイルが増えるたびに、ここのファイルに@useが増えまくることになります。そこで@forwardを使います。

Dart-sass @forward の使い方

例えば、color.scssやfont.scss、みたいなファイルがあったとして、それを一つのファイルに@forwardとしてまとめて記述しておくことができます。

以下は、_color.scss,_font.scss,_mixin.scssを_setting.scssというファイルにまとめています。

// _setting.scss
@forward 'color';
@forward 'font';
@forward 'mixin';

そして、_setting.scssを@useで呼び出し、ついでに名前もつけておきます。

// style.scss
@use 'setting' as s;

.container {
  @include s.flex();
  width: 90%;
  margin: auto;
}

.box {
  width: 30%;
  height: 200px;
  border: 1px solid s.$cRed;

  &_text {
    color: s.$cBlue;
  }
}

これである程度@useを書きまくらなくてもよくなりました。

今importでsassを書いているのならば、早めにDart-sassを導入して書き方に慣れておきましょう。そのときになってから慌てるよりは、早めに備えておくのが吉。

他にも細かいところはあるのでしょうが、最低限の超ざっくり、という感じです。

ここまで読んでくださりありがとうございました。

この記事を書いた人