備忘録.

less を css に変換するのは, gulp, grunt 等を使ってローカルでコンパイルしてって方法がベターですが, ちょっとしたページやサンプルを作るのにそんな環境いちいち用意してたら手間ですよね.

今回は, そんなときに使えるブラウザでサクッと less を導入する方法を紹介します.

less.js を使って動的に less を css に変換する方法

less.js を使うことで簡単に less -> css に変換してページに適応することができます.

cdn に上がっているので直リンでokです!

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>  

あとはこのスクリプトを読み込む手間で

<style type="text/less">  
@color:red;

body {  
    background: @color;
}
</style>  

などと書けば自動で css に変換されてページに適応されます.

下記リンクで実際に使用しているサンプルを見ることができます.

[runstant]

外部ファイル *.less を css に変換する方法

外部ファイルもいけます.

less.js を読み込む手前で <link rel="stylesheet/less" type="text/css" href='ファイル名'>
と書くことで指定したファイルを less から css に変換してページに適応することができます.

下記の例では hoge.less を読み込んで css としてページに適応しています.

<link rel="stylesheet/less" type="text/css" href="hoge.less">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>  

下記リンクで実際に使用しているサンプルを見ることができます.

[runstant]