jsdo.it が SCSS と LESS をサポート!! サンプルもあるよん♪

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

つい先日『jsdo.it が JSX と CoffeeScript をサポート!!』という記事を書きました.

「JSX や CoffeeScript がサポートできるんだったら Sass や LESS もサポートできんじゃね?」っと思っていたら 速攻でサポートしてくれてました!!

面白法人カヤックさんによる公式解説はこちら.

ということでちょっと期間が空いちゃいましたが, 紹介します.

jsdoit-sass-less

Table of contents

SCSS や LESS って何?

jsdo.it 上での使い方の紹介の前に SCSSって? LESSって?? って方の為にすこし説明します. SCSS や LESS とは, CSS をより楽に効率良く記述するための仕組み(言語?メタ言語??)です.

どちらも変数を使ったり, 計算式を使うことが出来ます. また, mixin(ミックスイン)という仕組みを使ってセレクタを継承したり, よく使うスタイルを関数化して 使いまわしたりといったことができます.

使い方は SCSS や LESS で書いたコードをコンパイル(コード変換)して CSS ファイルを出力します. そしてその CSS を普通の .css ファイル同様 link タグで読み込むことで使用します.

scss-less-to-css

SCSS

ファイルの拡張子は「.scss」です.

SCSS を調べていると Sass という単語もよく目にしますが, SCSS ≠ Sass なのでご注意下さい.

Sass というプログジェクトがあり, その派生言語が SCSS(Sassy CSS) です.

主な機能はこちら

  • Variables(変数)
  • Nesting(セレクタのネスト)
  • Mixins(ミックスイン)
  • Selector Inheritance(セレクタの継承)

使用例

1 – style.scss を作り下記のように入力

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
    

2 – コンパイラを使ってコードを変換

3 – style.css が出力される

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

4 – 出力された style.css を link タグで読み込む

SASS はぶっちゃけるとあまり使ったことがほとんど無いので, これ以上解説はしません. ヘタに書くと袋叩きにあっちゃいそうなのでw

詳しく知りたい方はこちらのサイトへ

LESS

読み方は日本語で「レス」. ファイルの拡張子は「.less」です.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

まぁ要は SCSS みたいなもんです.

SCSS との大きな違いは上記の通り node.js で作ってあるので JavaScript で動的に変換して使用することができます. 実行時のコストは上がりますが, いちいち変換せずに scirpt タグで下記のようにタグを読み込んでおくだけで LESS を使うことができます.

<script src="http://lesscss.googlecode.com/files/less-1.2.0.min.js"></script>
<link rel="stylesheet/less" type="text/css" href="style.less" />

私自身 Web サイトを作るときには LESS をよく採用しています. 1日1個 WordPress Theme を作るというバカみたいな挑戦をしてたころにかなりお世話になりました.

LESS については別途エントリーを書いて詳しく解説する予定です. 怒濤のサンプル集も70個ほど作成しているので近々公開します.

詳しく知りたい方はこちらのサイトへ

up

jsdo.it で SCSS や LESS を使ってみよう

でわでわ実際に使って行きましょう!!

JSX や CoffeeScript 同様先頭にコメントを追加するだけです.

CSS タブに下記のようなコメントを記述してください.

SCSS は

/* #! scss */

LESS は

// #! less

また, 上記のコメント文をわざわざ覚えなくても ファイル名の所にマウスを乗っけると追加ボタンが表示されるので これをクリックして追加することもできます.

jsdo.it insert button

up

Example

いくつかサンプルを作ってみたので紹介します.

SCSS

SCSS のサンプルです.

SCSS Template

SCSS のテンプレート. コメントの追加が面倒だというかたはこれを fork すれば簡単に SCSS を使うことができます.

Demo Download

scss-template

SCSS Sample – operator

演算子を使ったサンプルです. 上のボックスの幅を2倍した値を下のボックスに適応させています.

Demo Download

scss-sample-operator

LESS

LESS のサンプルです.

LESS Template

LESS の テンプレート. コメントの追加が面倒だというかたはこれを fork すれば簡単に LESS を使うことができます.

Demo Download

less-template

LESS Sample – absolute box

さくっと要素を絶対座標で扱えるようにするサンプルです.

Demo Download

less-sample-absolute-box

LESS Sample – darken function

color functions の darken を使ったサンプルです.

Demo Download

less-sample-darken-function

up

最近色々やっててブログの更新できてませんが, 近々やってることを公開します!!

これからゲームプログラミングを始めようって方にはきっと参考になるものなので, 期待していてください!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT