【Sass】超ざっくりDart-Sass【環境構築】

  • 投稿日
  • 更新日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

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

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

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

ちなみにHTMLを楽に書ける「Pug(パグ)」については下の記事をご覧ください。

【Pug】Web制作で、Pugを使ってみて感じたメリット・デメリット
CSSを楽に書くためのメタ言語、Sassがありますが、HTMLを楽に書くための言語も存在します。その一つがPug（パグ）です。 最近Web制作でPugを使ってコードを書いているので…
weblife.ppmp556.com

LPデザインのお仕事募集中です↓↓↓

LPデザインのお仕事募集中【固定表示記事】
ランディングページ（LP）デザイン（＋コーディング）のお仕事を募集しております。 なお、コーポレートサイトのよ…
weblife.ppmp556.com

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ファイルを出力させない設定です。ちなみにmin.cssファイルは圧縮した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を書きまくらなくてもよくなりました。

@forwordは、いわば中継点ようなものとイメージするとわかりやすいと思います。

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

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

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

Xserverドメイン

CSS Sass

この記事を書いた人

くまだ

記事一覧