ほな、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| 1 | h1 { |
| 2 | color: #900; |
| 3 | } |
ね？簡単でしょ？(適当)
