ベンダープレフィックスの記述で差分発生。原因と解決方法は？

ある日の業務中の出来事。

あれ？Gitで差分確認してみたらCSSベンダープレフィックスの記述で大量の差異が発生してる。

▼SASSコンパイル前

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

▼SASSコンパイル後

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
transition: all 4s ease;

SCSSファイルをまだ編集していないのに、コンパイルを行うとCSSベンダープレフィックスの記述が変わるみたい。。

それ、settings.jsonファイルの記述が異なるんじゃない？

settings.jsonファイルって、scssのコンパイル先を決めたりするファイルだよね。あれが関係あるのか。もう少し詳しく見てみよ

ということで今回は、ベンダープレフィックスの記述で差分発生したときの原因とその解決方法についてまとめていきたいと思います。

下記を想定しています。

使用テキストエディタ：vsCode または Cusor
使用拡張機能：Live Sass Compiler

Sassコンパイル時に差分発生
原因：settings.jsonファイルに差異あり
解決方法：settings.jsonもGitで管理

Sassコンパイル時に差分発生

まだscssファイルを編集していない。

にも関わらず、scssファイルをcssにコンパイルすると、ベンダープレフィックスの記述部分で差分が発生する。

scssファイルをcssにコンパイル
ベンダープレフィックスの記述部分で差分が発生

scssファイルに変更を加えていないので、差分は発生しないはず。

だがベンダープレフィックスの記述部分でだけ差分が発生。

原因：settings.jsonファイルに差異あり

なぜベンダープレフィックスの記述部分でだけ差分が発生するのか？

それはGitでファイル共有している人とsettings.jsonファイルの内容が異なるからです。

settings.jsoファイル、WEBサイトそのものには関係のないファイルということもあってGitで管理していないな。Git管理外ということもあって差異に気づけなかった。。

vsCodeの拡張機能「Live Sass Compiler」を使うにあたって、 Sassのコンパイルに関する設定はsettings.jsonファイルにて行われています。

【初心者向き】VSCodeでSCSSをコンパイルする方法-設定編 2023年版

Live Sass Compilerを使ってVSCodeでSCSSをコンパイル！拡張機能インストールからCSSの書き出しまでを解説

またsettings.jsonファイルはscssのコンパイル先を決めたりだけでなく、ベンダープレフィックスの設定を行ったりするところでもあります。

{
  "liveSassCompile.settings.formats": [ 
    {
      "format": "expanded", 
      "extensionName": ".css", 
      "savePath": "/css" 
    }
  ],
  "liveSassCompile.settings.autoprefix": [ 
    "last 2 versions",
    "ie >= 11",
    "Android >= 4",
    "ios_saf >= 8"
  ]
}

上記のうちautoprefixの記述部分がベンダープレフィックスの設定に該当します。

そしてそのautoprefixの記述部分で差異があると、コンパイルしたときに差分が発生する。

Gitで同じSCSSファイルを扱っていてもCSSファイルの記述が異なってしまう原因となっていたのです。