最近話題のCSSメタ言語。
SassとかLESSとかstylusとかいうヤツですね。
ちょっとした空き時間に触ってみたいなーと思っても、node.jsを入れてーとか、コンパイラがーとか、準備の段階で怖気づいてしまい、結局どういうものなのかよく分からないまま放置していました。
しかし、手軽に試せる方法に気付いてしまいました…。
CodePenでCSSメタ言語に触ってみよう!

HTML、CSS、JavaScriptなどのコードを書いて共有出来るサイト、CodePen。
ブラウザ上でコードが書け、そのままプレビューもできてしまいます。

こんな感じで、プレビュー用のスペースと、それぞれのコードを書き込めるスペースで分かれています。
実はこのサービス、色んなライブラリや記法などがカンタンに使えちゃうんです。
それぞれのスペースの歯車みたいなマークをクリックするとHTMLなら記法、CSSならメタ言語、JSならライブラリとそれぞれ選べるようになっているんです!

HTMLの場合、
・Haml
・Markdown
・Slim
・Jade
CSSの場合、
・Sass(.sass)
・Sass(.scss)
・Less
・Stylus
といったメタ言語が使える他、
・Normalize
・Reset
・-prefix-free
・Autoprefixer
などを使用するかどうか、というのも選べます。
JavaScriptの場合、
・CoffeeScript
・LiveScript
が選択できて、
・jQuery
・jQuery&jQuery UI(Base Theme)
・Zepto
・Moo Tools
・Prototype
・YUI
・Ext JS
・Dojo
といいたライブラリを選択できます。
また、特に会員登録などをしなくても使う&保存が出来ます。
保存すると固有のURLができるので、Twitterなどでシェアする事もできますよ。
ブログなどにコードを貼付けられる!
これは会員登録をしないと出来ませんが、保存したコードをHTMLに貼付けて表示する事が出来ます。
これはStylusでシドニアの騎士に出てくる東亜重工のロゴを描いてみた図です。
(確認はchromeのみです)
See the Pen cssで東亜重工ロゴを書いてみたよ by Mei Koutsuki (@mei331) on CodePen.
こっちはSassで自分のくろひつじアイコンに挑戦してみた図。
See the Pen cssでアイコンを描く by Mei Koutsuki (@mei331) on CodePen.
CodePenを使い始めたきっかけは、サンプルをプレビューした状態でブログに貼りたかったからなんですが、便利すぎますね。
あ、会員登録は「Free Plan」なら無料ですよ!
CSSメタ言語を使ってみた感想
複雑なものや巨大なサイトを作る場合は、あると便利だなーと思いました。
やってみたことが絵を描く系なので、本当の良さはちゃんと分かれてないと思いますw
ちなみにCSSで東亜重工ロゴ書いてみようって思ったのは、kojika17さんの「JAYPEGのロゴを簡単に作るためのヒント – me-mo」がきっかけです。
シドニア展見てきたばかりだったから、ちょっと高ぶってしまいましたw
んで、実際に触ってみて、書き方としてはStylusが自分は描きやすいなーと思いました。
(最初に書いてみたせいもあるかもしれませんが)
stylus > sass > less
という感じ。
ただ、実際に導入しようとすると、軽く調べた限りなのですが、
less > sass > stylus
という印象です。
悩ましいですね。
実際に書いてみないと、書き方の相性ってやっぱりありますし、導入前にちょこっと触ってみたい!という時に是非つかってみてください。
おかげで食わず嫌いでいたCSSメタ言語にがぜん興味が湧きました!
さーカンタンな導入方法をしらべないとなー。