やったこと

• 各スタイルを変更。
• Compass を削除。
• ベンダープレフィックスを削除。
• Ruby Sass を削除。
• node-sass を導入。
• Grunt.js を削除。
• npm scripts に build と wacth を追加。

各スタイルを変更

• base.scss および 各スタイル の scss ファイル を変更。

ベースの CSS および Apex で用意されている6種類のテーマのスタイルの CSS を変更。

Compass を削除

• @import で Compass の mixin を読み込んでいる部分を削除。
• @include の定義を削除。
• clearfix は 独自で mixin を作成。
  • pie-clearfix を削除。
• ベンダープレフィックスを削除。Can I Use で各ブラウザの対応状況を確認。
  • border-radius
  • linear-gradient
  • box-sizing
  • transition

box-sizing と transition は後から追加したスタイルですが、Compass を削除するためベンダープレフィックスを削除。

Ruby Sass を削除

• grunt-sass-convert を削除して node-sass を導入。
• config フォルダと sourcemap.rb ファイルを削除。

grunt-sass-convert は sass-convert でコンパイルしています。
grunt-sass なら node-sass でコンパイルしてくれるみたいです。

Grunt.js をやめて npm scripts に移行したいので、node-sass を導入しました。

Grunt.js を削除

• gruntfile.js ファイルを削除。
• npm scripts に build と wacth を追加。
  • node-sass の コンパイルと監視を npm scripts で記述。
  • npm run build または npm run wacth でタスクを呼び出し可能。

Fork したリポジトリ

• mt-theme-apex

以前書いた記事

Movable Type 6のテーマ「Apex」をカスタマイズする