初心者がLibSassをDartSassに移行する方法【@useと@forwardを使いこなす】

DartSassに移行されるけど何が変わるかわからない！

以前のSassからDartSassで変わる内容を整理しました。

LibSassの廃止

⇒

DartSassの概要

変更前：@import

ファイル構成

style.scss
_variable.scss
_mixin.scss

コーディング例

style.scss

@import "variable";
@import "mixin";

.example1{
 color:$ex-color;
}
.example2{
 @include box();
}

_variable.scss

$ex-font:10px;
$ex-color:red;

_mixin.scss

@mixin box(){
 width:100px;
 height:100px;
}

変更後：@use や@forward

ファイル構成

style.scss
_index.scss
_variable.scss
_mixin.scss

コーディング例

style.scss

@use "index" as d;

.example1{
 color:d.$ex-color;
}
.example2{
 @include d.box();
}

_index.scss

@forward "variable";
@forward "mixin";

_variable.scss

$ex-font:10px;
$ex-color:red;

_mixin.scss

@mixin box(){
 width:100px;
 height:100px;
}

style.scss

@use "variable" as d;

.example1{
 color:d.$ex-color;
}

_variable.scss

$ex-font:10px;
$ex-color:red;

ファイル構成

style.scss
_variable.scss

①　@use “variable”でファイルを参照

②　「as d」という名前空間を追記します。

③　「.example1」の文字色colorを指定する変数「$ex-color」の前に、「d.」をつけます。

＊「d.」をつけないとコンパイルエラーになります。

＊「d」の部分は好きな名称で良いです。

style.scss

@use "index" as d;

.example1{
 color:d.$ex-color;
}
.example2{
 @include d.box();
}

_index.scss

@forward "variable";
@forward "mixin";

_variable.scss

$ex-font:10px;
$ex-color:red;

_mixin.scss

@mixin box(){
 width:100px;
 height:100px;
}

＜ファイル構成＞

style.scss
_index.scss
_variable.scss
_mixin.scss

①　「_index.scss」内に、

@forward “variable”;　
@forward “mixin”;
でファイルをまとめる。

②　「style.scss」内で、

@use “index” で「index.scss」を参照する。

③　「as d」という名前空間を追記します。

④　変数の参照は、

「.example1」の文字色colorを指定する変数「$ex-color」の前に、「d.」をつけます。

⑤　mixinの参照は、

mixinの名前「box」の前に、「.d」をつけます。

style.scss

$ex-color: red;
$ex-color: green !default;

.example1{
 color: $ex-color;
}

コンパイルした結果は、

style.css

.example1{
 color: red;
}

「style.scss」では、

変数宣言（2行目）に、!defaultフラグが指定されているので、コンパイル時に先に宣言されている赤（red）が適用されます。

実際に

「style.css」では、

コンパイルの結果、赤（red）が適用されました。

基本のファイル構成

index.html：本文のhtmlファイル

styles：スタイル全体をまとめたフォルダ

style.scss：スタイル全体を定義するファイル

globals：共通に参照するファイル用フォルダ

_index.scss：globals内の変数をまとめて読み込むためのファイル

_variables.scss：ブローバル変数ファイル

_mixin.scss：mixinファイル

_mediaq.scss：メディアクエリのブレイクポイントを定義するファイル

pages：本文のスタイルフォルダ

_home.scss：本文の文章のスタイルを定義するファイル

parts：本文中の部品のスタイル用フォルダ

_common.scss：部品に関してスタイルを定義する共通の変数用ファイル

_home.scss

@use "../globals" as *;
@use "../parts/common" as *;

.example1{
 color:$ex-color;

 @include mq(md){
padding:50px;
 }
 @include mq(xl){
 padding:50px 150px;
 }
}

.example2{
 @include box();
}

本文に使う、変数を「globals」フォルダから、共通スタイルを「_common.scss」から読み込む

「.example1」のレスポンシブ表現

幅600px未満はpadding無し

600px～1280pxはpadding:50px

1280px以上はpadding:50px 150px

＊　@use “../globals” as *;の場合は、名前空間を省略してスタイル表示できます。

_mediaq.scss

$breakpoints: (
  //480px以上(スマホの横向き)のモニタ
  'sm': 'screen and (min-width: 480px)',

  //600px以上のタブレットやモニタ
  'md': 'screen and (min-width: 600px)',

  //960px以上のモニタ
  'lg': 'screen and (min-width: 960px)',

  //1280px以上のモニタ
  'xl': 'screen and (min-width: 1280px)',
) !default;

@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

本文のスタイルを定義するファイルで、レスポンシブWEBデザインを実現するメディアクエリを使います。

「mixin」でわかり易く簡易にメディアクエリを使えるように定義します。

「sm」「md」「lg」「xl」でモニタ幅の範囲を定義して使います。

_index.scss

@forward "variables";
@forward "mixin";
@forward "mediaq";

「globals」フォルダ内で変数を定義しているファイルを一つにまとめる

_variables.scss

$ex-font:10px;
$ex-color:red;

共通で参照する変数をまとめたファイル

_mixin.scss

@mixin box(){
 width:100px;
 height:100px;
}

メディアクエリ以外の「minix」を定義したファイル

style.scss

@use "pages/home";

本文の基本スタイルを「_home.scss」から読み込む

_common.scss

_common.scss

スタイルを定義するのに使う共通の変数を、「parts」フォルダから読み込む