文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== lessphp - PHP で書かれた LESS コンパイラ ====== 本家: [[http://lesscss.org/|Getting started | Less.js]]\\ [[https://leafo.net/lessphp/|LESS compiler in PHP - lessphp]]\\ [[git>MarcusSchwarz/lesserphp|GitHub - MarcusSchwarz/lesserphp: LESS compiler written in PHP]]\\ ドキュメント: [[https://www.maswaba.de/lesserphpdocs/|lesserphp Documentation - maswaba.de]]\\ Less (which stands for Leaner Style Sheets)\\ ===== サンプル ===== ==== 演算 ==== <WRAP color_code mincode><code php> <php> $less = new lessc; echo "<pre>\n"; echo $less->compile(<<< EOF .block { padding: 3 + 4px } EOF); echo "</pre>\n"; </php> </code></WRAP> <WRAP color_code mincode><php> $less = new lessc; echo "<pre>\n"; echo $less->compile(<<< EOF .block { padding: 3 + 4px } EOF); echo "</pre>\n"; </php></WRAP> ==== mixin その 1 (擬似クラス) ==== <WRAP color_code mincode><code php> <php> $less = new lessc; echo "<pre>\n"; echo $less->compile(<<< EOF .mixin { &:hover { color: red; } } #demo { .mixin; } EOF); echo "</pre>\n"; </php> </code></WRAP> <WRAP color_code mincode><php> $less = new lessc; echo "<pre>\n"; echo $less->compile(<<< EOF .mixin { &:hover { color: red; } } #demo{ .mixin; } EOF); echo "</pre>\n"; </php></WRAP> ==== mixin その 2 (擬似要素) ==== <WRAP color_code mincode><code php> <php> $less = new lessc; echo "<pre>\n"; echo $less->compile(<<< EOF .custom_scroll { &::-webkit-scrollbar { width: 10px; // 縦スクロールバーの幅 height: 10px; // 横スクロールバーの幅 } &::-webkit-scrollbar-track { border-radius: 5px; box-shadow: inset 0 0 6px rgba(50, 50, 50, .9); } &::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, .3); border-radius: 5px; box-shadow:0 0 0 1px rgba(255, 255, 255, .3); } } .dokuwiki { .wrap_color_code { // mixin .custom_scroll; } } EOF); echo "</pre>\n"; </php> </code></WRAP> <WRAP color_code mincode><php> $less = new lessc; echo "<pre>\n"; echo $less->compile(<<< EOF .custom_scroll { &::-webkit-scrollbar { width: 10px; // 縦スクロールバーの幅 height: 10px; // 横スクロールバーの幅 } &::-webkit-scrollbar-track { border-radius: 5px; box-shadow: inset 0 0 6px rgba(50, 50, 50, .9); } &::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, .3); border-radius: 5px; box-shadow:0 0 0 1px rgba(255, 255, 255, .3); } } .dokuwiki { .wrap_color_code { // mixin .custom_scroll; } } EOF); echo "</pre>\n"; </php></WRAP> ===== lesserphp テスト ===== <html> <div class="embed_codemirror"> <style> @import '/_media/javascript/codemirror/5.65.8/lib/codemirror.css'; @import '/_media/javascript/codemirror/5.65.8/theme/cobalt.css'; .dokuwiki pre { box-shadow: unset; } .embed_codemirror .CodeMirror * { font-family: "HackGen Console NFJ", Arial, monospace; font-size: 10px; } </style> <!-- <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.8/lib/codemirror.css"> --> <!-- <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.8/theme/cobalt.css"> --> <script src="/_media/javascript/codemirror/5.65.8/lib/codemirror.js"></script> <!-- 言語に応じたjsファイルを読み込む --> <script src="/_media/javascript/codemirror/5.65.8/mode/css/css.js"></script> <textarea id="editor_js"> div { .child-class { color: purple; } &.isa-class { color: green; } #child-id { height: 200px; } &#div-id { height: 400px; } &:hover { color: red; } :link { color: blue; } } </textarea> CodeMirror Version: <label id="lblCdMirrVer"></label> <script> var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), { mode: "css", theme: "cobalt", lineNumbers: true, indentUnit: 2 }); document.getElementById('lblCdMirrVer').innerText = CodeMirror.version; </script> </div> </html> ===== 参考文献 ===== **DokuWiki** は Forkされた **lessphp** コンパイラ [[git>MarcusSchwarz/lesserphp|lesserphp]] 搭載している。\\ [[https://www.dokuwiki.org/start?id=ja:devel:less|ja:devel:less [DokuWiki]]]\\ php/lessphp.txt 最終更新: 2022/09/26 06:40by ともやん