LESS
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(LESS);
*目次 [#y966162e]
#contents
*参考情報 [#j03187c5]
-[[LESS « The Dynamic Stylesheet language:http://les...
-[[「LESS＆専用エディター」でCSSをシンプルに書こう - ＠IT...
-[[CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞...
-[[ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方 (1/2)...
*ローカルで動作確認する [#ofadf63b]
-Chromeだとローカルのless.jsをインクルードする方法だと動...
-[[Google Chrome でローカルファイルのJSを実行できるように...
**ローカルjsで動作確認 [#jd4473ce]
-style.lessを次の内容で保存。単に@colorという変数を使った...
#pre{{
@color: red;
#header {
color: @color;
}
h2 {
color: @color;
}
}}
-less-1.3.1.min.jsを同じ場所に保存。
-sample.htmlを次のよう内容で保存する。そうするとh2が赤色...
#pre{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional...
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; c...
<title>LESSのテスト</title>
<link rel="stylesheet/less" type="text/css" href="sty...
<script src="less-1.3.1.min.js" type="text/javascript...
</head>
<body>
<h2>aaaaaaaaaaaaa</h2>
</body>
</html>
}}
**コンパイル方法 [#o25a6a3b]
-lesscコマンドをインストール。npmに-gをつけないと、カレン...
npm install less
-lesscでlessファイルを展開。
#pre{{
./node_modules/less/bin/lessc style.less
#header {
color: #ff0000;
}
h2 {
color: #ff0000;
}
}}
-標準出力出力されるので、例えばstyle.cssとかにリダイレク...
終了行:
&tag(LESS);
*目次 [#y966162e]
#contents
*参考情報 [#j03187c5]
-[[LESS « The Dynamic Stylesheet language:http://les...
-[[「LESS＆専用エディター」でCSSをシンプルに書こう - ＠IT...
-[[CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞...
-[[ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方 (1/2)...
*ローカルで動作確認する [#ofadf63b]
-Chromeだとローカルのless.jsをインクルードする方法だと動...
-[[Google Chrome でローカルファイルのJSを実行できるように...
**ローカルjsで動作確認 [#jd4473ce]
-style.lessを次の内容で保存。単に@colorという変数を使った...
#pre{{
@color: red;
#header {
color: @color;
}
h2 {
color: @color;
}
}}
-less-1.3.1.min.jsを同じ場所に保存。
-sample.htmlを次のよう内容で保存する。そうするとh2が赤色...
#pre{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional...
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; c...
<title>LESSのテスト</title>
<link rel="stylesheet/less" type="text/css" href="sty...
<script src="less-1.3.1.min.js" type="text/javascript...
</head>
<body>
<h2>aaaaaaaaaaaaa</h2>
</body>
</html>
}}
**コンパイル方法 [#o25a6a3b]
-lesscコマンドをインストール。npmに-gをつけないと、カレン...
npm install less
-lesscでlessファイルを展開。
#pre{{
./node_modules/less/bin/lessc style.less
#header {
color: #ff0000;
}
h2 {
color: #ff0000;
}
}}
-標準出力出力されるので、例えばstyle.cssとかにリダイレク...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
