WordPressでSass,Lessが使える!Jetpackでブラウザからコンパイル!

Category: CMS | Tags: ,
WordPressでSass,Lessが使える!Jetpackでブラウザからコンパイル!のアイキャッチれす

WordPress.com(ブログサービスのほう)のCSSエディターがSass・Lessに対応したようです。
WordPress.comの機能はパッケージ型のWordPressでもJetpackプラグインにより提供されているので早速試してみました。

とりあえずプラグインをインストール。
1. プラグインからJetpack by WordPress.comをインストール。
2. WordPress.comのアカウントが必要なので登録しアカウント認証。

インストールと認証が完了するとJetPackのメニューが現れます。
JetPackの画面
JetPackのメニューからカスタムCSSを選択。
もしくは、「外観」から追加された「CSS編集」。

CSS スタイルシートエディターの画面
CSSスタイルシートエディター画面にいきます。

この「カスタムCSS」とは、テーマのstyle.cssとは別のCSSで、
テーマのCSSをいじらずに外観を編集する際に使用します。
インストール型のWordPressですと何で?って感じますが、
WordPress.comはテーマ編集をしないのでカスタムCSSでCSSプロパティを上書きをする為です。

カスタムCSSはドメイン直下にCSSが作成されます。
http://blog.sou-lab.com/?custom-css
※厳密に言うと動的に吐き出されているのでファイルは無い。

で、本題。注文は右の「Preprocessor」のところ、
Preprocessor Sass Lessキタ━━━━(゚∀゚)━━━━!!
キタ━━━━(゚∀゚)━━━━!! SassとLessが選べる!!

早速試しにSassを書いてみた。
( ‘д‘⊂彡☆))Д´) パーン.scss

保存すると、カスタムCSSが更新されます。
http://blog.sou-lab.com/?custom-css

おー、すげぇ。ネスト、変数、mixin、当然問題なし。書き出しはcompressedみたいですね。

placeholderとeach試した
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 に対応

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss