WordPress.com(ブログサービスのほう)のCSSエディターがSass・Lessに対応したようです。
WordPress.comの機能はパッケージ型のWordPressでもJetpackプラグインにより提供されているので早速試してみました。
とりあえずプラグインをインストール。
1. プラグインからJetpack by WordPress.comをインストール。
2. WordPress.comのアカウントが必要なので登録しアカウント認証。
インストールと認証が完了するとJetPackのメニューが現れます。
JetPackのメニューからカスタムCSSを選択。
もしくは、「外観」から追加された「CSS編集」。
CSSスタイルシートエディター画面にいきます。
この「カスタムCSS」とは、テーマのstyle.cssとは別のCSSで、
テーマのCSSをいじらずに外観を編集する際に使用します。
インストール型のWordPressですと何で？って感じますが、
WordPress.comはテーマ編集をしないのでカスタムCSSでCSSプロパティを上書きをする為です。
カスタムCSSはドメイン直下にCSSが作成されます。
http://sou-lab-com.check-xserver.jp/?custom-css
※厳密に言うと動的に吐き出されているのでファイルは無い。
で、本題。注文は右の「Preprocessor」のところ、
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!! SassとLessが選べる！！
早速試しにSassを書いてみた。
保存すると、カスタムCSSが更新されます。
http://sou-lab-com.check-xserver.jp/?custom-css
おー、すげぇ。ネスト、変数、mixin、当然問題なし。書き出しはcompressedみたいですね。
eachとextendも追記。eachも問題なく動く。ふむ。すごい。forなんかも問題なさそうだ。
でも、extendは動くけどplaceholderは動かない！
エラーメッセージが出ないのでSCSSそのまま書き出されてました。ちょっとハマった。。
アップデートで対応してもらえるのを待ちましょう。
Lessはjsかませてればそのまま使用することもできるので、 SassがWordPressで直で動くのはうれしいですね。 テーマのCSSもSCSSのままで自動でコンパイルできたら最高ですね。
Mac版のFirefoxはカーソルがズレてたり、ペーストしても全文上書きされたり挙動がちとおかしかったですが、
Chromeは問題なく動作しておりました。
Jetpack by WordPress.comは他にも素敵な機能が満載なので色々試してみようと思います。
今年最後の記事っぽいです。
本年もありがとうございました。
来年はもうちょっとちゃんと書きます。多分。
参考サイト：
WordPress.com 日本語ブログ CSSエディターがCSSプリプロセッサSass・LESS に対応