cre8cre8
AskMe♥

ほな、Less.js使って開発効率を上げてみまひょか〜
(俺得スクリプト付き)

このスクリプトを実行すると超簡単(超簡単とは言っていない) Less.js が導入できます。
記事?あぁ、おまけですよっと。べ、べつにあんたのために書いたわけじゃないんだからね!

1$ curl -LO https://raw.githubusercontent.com/less/less.js/master/dist/https://cre8cre8.com/https://cre8cre8.com/less.min.js
2
3$ echo ''                                                   >  easy_intro.htm
4$ echo '<!doctype html>'                                    >> easy_intro.htm
5$ echo '<html>'                                             >> easy_intro.htm
6$ echo '<head>'                                             >> easy_intro.htm
7$ echo '    <meta charset="utf-8">'                         >> easy_intro.htm
8$ echo '    <link rel="stylesheet/less" href="style.less">' >> easy_intro.htm
9$ echo '    <script src="https://cre8cre8.com/https://cre8cre8.com/less.min.js"></script>'            >> easy_intro.htm
10$ echo '</head>'                                            >> easy_intro.htm
11$ echo ''                                                   >> easy_intro.htm
12$ echo '<body>'                                             >> easy_intro.htm
13$ echo '    <h1>hello</h1>'                                 >> easy_intro.htm
14$ echo '</body>'                                            >> easy_intro.htm
15$ echo '</html>'                                            >> easy_intro.htm
16
17$ echo ''                   >  style.less
18$ echo '@charset "utf-8";'  >> style.less
19$ echo 'h1 { color: red; }' >> style.less
20

Less.js を久しぶりに導入しようと思ったら久しぶりすぎて忘れてしまったたくみんです。
Sass?あぁ、私Sassあんまり好きじゃないんで、I'm sorry です。。。
Railsしているのに、Sassではなく、Less.js 使ってレールから脱線しているプログラマー(Lv.3)です。

それでは、さっそく Less.js を導入しまっせ。
Less.jsは便利なものでして、CSSにコンパイルしなくても、 <script> タグに書いてやるとびっくりするほどユートピアな感じで有効になります。
それでは、githubを見てみましょう。

https://github.com/less/less.js/

ここでですね。
distディレクトリをクリックして、https://cre8cre8.com/https://cre8cre8.com/less.min.js をクリックしましょう。
その後、上らへんにある、Rawのボタンを押して、ブラウザに表示された JavaScript をダウンロードしましょう。
もう、なんかいろいろめんどくさい人は、直リンク書いときますのでそこからダウンロードして下さい。
*直リンクなので、リンク切れてたらm( )mゴメンナサイ

https://raw.githubusercontent.com/less/less.js/master/dist/https://cre8cre8.com/https://cre8cre8.com/less.min.js

さらに、もうなんかいろいろめんどくさくて、mac(or Linux)使ってる人は次のコマンド打ってダウンロードしましょう。

1$ curl -LO https://raw.githubusercontent.com/less/less.js/master/dist/https://cre8cre8.com/https://cre8cre8.com/less.min.js

ダウンロードが完了したら、次はHTMLを書きます。
Less.jsは冒頭でも書いたとおり、 <script> でロードするだけで使えますので、さっくりといきます。

Filename:easy_intro.htm

1<!doctype html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <link rel="stylesheet/less" href="style.less">
6    <script src="https://cre8cre8.com/https://cre8cre8.com/less.min.js"></script>
7</head>
8
9<body>
10    <h1>こいつ…色が変わるぞっ…!?!?</h1>
11</body>
12</html>

Filename:style.less
1h1 {
2    color: #900;
3}

ね?簡単でしょ?(適当)

≪ 前の記事
cre8cre8なJavaScript入門
~関数を使ってグラフィカルなプログラムをつくろう~
次の記事 ≫
今更ながらless.jsでレスポンシブデザインできるコードをさっくりと書いてみた

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事