css
Stylus を使う
目次

インストール

  1. インストールガイド

    http://stylus-lang.com/#get-styling-with-stylus

  2. Node.js をインストールする

    https://nodejs.org/en/

  3. ガイドに書いてある通りにコマンドを実行する。

    $ sudo npm install stylus -g
/usr/local/bin/stylus -> /usr/local/lib/node_modules/stylus/bin/stylus
+ stylus@0.54.5
added 20 packages from 46 contributors in 1.399s

  4. インストールできたか確認する。

    $ stylus -V
0.54.5

使い方

  • ファイルの拡張子は、 .styl もしくは .stylus とする。

  • 初めて styl ファイルを作成すると、 File Watchers を有効にするか否か聞かれるので (PyCharm の上部に表示される) OK を押下すると、自動ビルドされる。

    以降、変更を検知すると勝手にビルドされる。

    • ログ

      ...
2018-10-18 22:14:19,451 INFO Building files/static/css/style-sp.css
2018-10-18 22:14:19,454 INFO Building files/static/css/style-sp.styl
...

    • File Watchers の設定変更は、こちらで行う。

      /images/html-css/stylus/file-watchers.png

    • PyCharm 上ではこんな風に見える

      /images/html-css/stylus/stylus-image.png

  • HTML の <head></head> には、こう書く

    <link rel="stylesheet" href="/static/css/style-sp.css">

    • style-sp.styl と書いても認識してくれない

  • .styl ファイルに、Stylus の書き方とふつうの CSS の書き方を併記できる。

    • style-sp.styl にこう書くと、

      @charset "UTF-8"

/* --------------------------------
 * Stylus の書き方
 * -------------------------------- */
body
  background-color #f8b500

/* --------------------------------
 * CSS の書き方
 * -------------------------------- */
body {
  background-color: #ed6d3d;
}

    • style-sp.css にこう出力される

      @charset "UTF-8";
/* --------------------------------
 * Stylus の書き方
 * -------------------------------- */
body {
  background-color: #f8b500;
}
/* --------------------------------
 * CSS の書き方
 * -------------------------------- */
body {
  background-color: #ed6d3d;
}