はてなブログテーマ開発（2）Hatena-Blog-Theme-Boilerplate を使って

2018.08.03 CSS, SASS, はてなテーマ, はてなブログ

はてなブログテーマ開発（2）Hatena-Blog-Theme-Boilerplate を使って

はてなが公開しているサンプルテーマ「Hatena-Blog-Theme-Boilerplate」を使ってのテーマ開発の２回目です。

npm-scripts
cssファイルのインポート
_core.scss
変数
@import

01npm-scripts

前回で、npm start と打てば、boilerplate.css が作られ、../scss/ 以下のフォルダが監視され、変更があれば自動的に boilerplate.css が再ビルドされるというところまでいきました。その流れを package.json の npm-scripts から見てみましょう。

{
  "scripts": {
    "prestart": "npm run build",
    "start": "npm-run-all -p watch server",
    "build": "npm-run-all scss autoprefixer",
    "scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
    "autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
    "server": "browser-sync start -c bs-config.js",
    "watch": "chokidar \"../scss/\" -c \"npm run build\""
  },
}

npm start と打ちますと、まず、prestart が実行されます。pre がつくタスクは、その後のタスク名を実行する前に実行されます。同じようなものに後で実行される post があります。

ですので順番に、scss でコンパイルされ、 autoprefixer でベンダープレフィックスが付加されて boilerplate.css が作られ、watch と server が -p オプションが付いていますので、並列処理されます。

で、コマンドプロンプト（コンソール）の結果を見てみますと、

> node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/


DEPRECATION WARNING on line 12, column 8 of C:*****/scss/boilerplate.scss:
Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.

と、sass の実行時に「DEPRECATION WARNING（非推奨警告）」が出ています。非推奨ですから将来廃止になるよということでしょう。

02cssファイルのインポート

この警告は、@import を使って cssファイルを読み込んでいることへの警告です。

scss/boilerplate.scss の12行目です。

// import normalize
@import "node_modules/normalize.css/normalize";

拡張子が省略されていますので、normalize.scss がインポートされますが、実際には normalize.css しかありませんので、WARNINGが出ているということでしょう。現状では、これでインラインで normalize.css が展開されていますので問題ありませんが、いずれ（次バージョン？）非対応になるということなんでしょう。

そのあたりが、次のスレッドで議論されています。

Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass. · Issue #2362 · sass/node-sass · GitHub

03_core.scss

scss/lib/_core.scss が本体の scssファイルです。基本的にはこれを編集していくことになります。

/* 2カラムレイアウト */
#content-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media #{$mq-sm} {
        flex-direction: row;
    }
}
#wrapper {
    @media #{$mq-sm} {
        width: 480px;
    }
    @media #{$mq-md} {
        width: 600px;
    }
}
#box2 {
    @media #{$mq-sm} {
        width: 200px;
    }
    @media #{$mq-md} {
        width: 300px;
    }
}

２カラムレイアウトがモバイルファーストで書かれています。モバイルではコンテンツとサイドバーが縦に並び（flex-direction: column）、タブレット以上ではメディアクエリ（@media #{$mq-sm}）を使って横に並びます（flex-direction: row）。

$ マークは変数です。

// Media Queries
$mq-xs: "(max-width: 480px)";
$mq-sm: "(min-width: 768px)";
$mq-md: "(min-width: 992px)";
$mq-lg: "(min-width: 1200px)";

scss/lib/_variable.scss から読み込んで展開されます。

04変数

scss/lib/_variable.scss には、他にも

// Background color
$background: #fff;
$bg-light: #f5f5f5;


// text color
$text: #454545;
$text-light: #999;
$text-header: #333;

といった変数が定義されており、この値を変更すれば、背景のカラーや文字色を一括で変更することができます。便利ですね。

05@import

normalize の読み込みで警告が出ていた @import ですが、たとえば私の場合、boilerplate.scss に

/* import toTop Navigation */
@import "scrollToTop";

として、定型の scrollToTop.scss をインポートするようにして、ページトップへ戻るナビゲーションの scssファイルを再利用しています。便利ですね。

次回は、node.js のwebサーバ機能を調べてみようと思います。前バージョンでは、browser-sync を使ってブラウザ自動リロードが有効になっていたのですが、多分HTTPS化されたブログでは機能しないがために非対応になったんだろうと思います。node.js のサーバをHTTPS化すればいけるのではないかという気がしています。

どうでしょう？