このエントリーをはてなブックマークに追加

Memo

SassやLessなどCSSメタ言語を手軽に試してみた話

2014/07/14
Memo

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

CodePenでCSSメタ言語に触ってみよう!

codepen1

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

codepen_ss1

こんな感じで、プレビュー用のスペースと、それぞれのコードを書き込めるスペースで分かれています。

実はこのサービス、色んなライブラリや記法などがカンタンに使えちゃうんです。

それぞれのスペースの歯車みたいなマークをクリックするとHTMLなら記法、CSSならメタ言語、JSならライブラリとそれぞれ選べるようになっているんです!

codepen_ss2

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のみです)

こっちは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メタ言語にがぜん興味が湧きました!
さーカンタンな導入方法をしらべないとなー。

Category : MemoTags : , ,

関連記事

コメントを残す




About

中の人:Mei Koutsuki (@mei331)
神奈川でweb作ったり、お洋服つくったりしてる黒いひつじさん。ロリィタ系webクリエイター。12年9月に一児の母となり、自宅で子育てしながらお仕事してます。
>> もっと詳しく