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;
      }