sassの導入(Pelican)

in pelican

tagged pelican, css, sass, scss, python

table contens

cssをいじり出すと、sass で書きたくなる。
というかsassじゃないけど、この先管理できなくなりそう。

scss/style.scss を利用する手順は以降の通り。

1 sass の導入方法

sass compiler としては、ruby のsassが一般的だが、せっかくなので python だけでやる。
pyscss を導入する。

$ pip install pyscss

2 pelicanconf.py の修正

PLUGIN として、 assets を設定。
sccs, css の保存場所として、theme 配下のdirectoryを記述しておく。

PLUGIN_PATHS = ['pelican-plugins']


PLUGINS = ['assets']




ASSET_SOURCE_PATHS = ['vendor/css', 'scss',]

3 sass の style.scss を作る

theme/theme名/scss に style.scss を作成。

ex

div.content {
    code {
       background-color: #f0f0f0;
       padding: 2px 4px;
       border-radius: 4px;
    }
}

4 template に埋め込む

theme/theme名/base.html (style linkを埋め込むべき template file) に
以下のように記述する。

filtersに、以下の2つを設定する。

  • sass complier 用 pyscss
  • minify 用 cssmin
  {% assets filters="pyscss,cssmin", output="css/style.min.css", "style.scss" %}


  <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">


  {% endassets %}

開発環境では、こんな感じでhtmlに展開される。

<link rel="stylesheet" href="http://localhost:8000/theme/css/style.min.css?e861228a">