ブログをSASSを使ってダークテーマにしました。（PC版のみ）

はじめに

ブログが少し見にくい気がしたので、デザインを変更しました。 （パソコン版のみ） 「Neutral」というテーマに変更したのですが、これは白を基調としたテーマだったので、かっこよくて目に優しい（気がする）ダークテーマにカスタマイズしてみました。

どのようにカスタマイズするのか

はてなブログは自分でスタイルシートをカスタマイズできる機能があります。
私は、以前から「SASS」というメタ言語について気になっていたので、それを使って書くことにしました。 SASSは、よりプログラムのようにCSSを書けるメタ言語です。よく使う値を変数として定義できたりします。

参考： tombomemo.com

完成したソースコード

$TEXT_COLOR:#d4d4d4;
$EMPH_BACKGROUND_COLOR: #0a0a0a;
$ARTICLE_BACKGROUND_COLOR: #1e1e1e;
$LINK_COLOR: #75beff;

.entry {
    background-color:$ARTICLE_BACKGROUND_COLOR;
    .entry-inner {
        p, h1, h2, h3, h4, h5, dl, ol, ul {
            color:$TEXT_COLOR;
            a{
                color: $LINK_COLOR;
            }
        }

        .entry-see-more {
            color: $TEXT_COLOR;
        }

        .entry-content {
            .table-of-contents {
                background: $EMPH_BACKGROUND_COLOR;
                a, li {
                    color: $LINK_COLOR;
                }
            }
        }

        .entry-header {
            .entry-categories {
                .entry-category-link {
                    color: $EMPH_BACKGROUND_COLOR;
                }
            }
        }

        table{
            tbody {
                tr {
                    background: #fff;
                }
            }
        }
        blockquote{
            background: #111;
            border-left: 3px solid #2f2f2f;
        }
    }
}

.hatena-module {
    background-color: $ARTICLE_BACKGROUND_COLOR;
    .hatena-module-title {
        color: $TEXT_COLOR;
        a { 
            color: $TEXT_COLOR;
        }
    }
    .hatena-module-body {
        .urllist-item {
            .urllist-item-inner {
                .urllist-title-link{
                    color: $TEXT_COLOR;
                }
            }
        }
    }
}
.figure-image {
    figcaption {
        color: $TEXT_COLOR;
    }
}

.pager.permalink{
    background: $ARTICLE_BACKGROUND_COLOR;
}

.pager{
    .pager-next, .pager-prev {
        background: $ARTICLE_BACKGROUND_COLOR;
    }
}

a {
    color: $TEXT_COLOR;
}

こんな感じになりました。 初めて書いたので少し汚いコードになっているかもしれません。
このSCSSをCSSファイルにコンパイルし、はてなブログのNeutralテーマに適用することで、僕のブログのようなデザインにすることが出来ます。

まとめ

SCSS楽しい！技術を使ってCSS書いてる感がある。まだ使い始めたばかりなので、今後使い方を模索していきたいです。