lessphp - PHP で書かれた LESS コンパイラ
本家: Getting started | Less.js
LESS compiler in PHP - lessphp
GitHub - MarcusSchwarz/lesserphp: LESS compiler written in PHP
ドキュメント: lesserphp Documentation - maswaba.de
Less (which stands for Leaner Style Sheets)
サンプル
演算
<php> $less = new lessc; echo "<pre>\n"; echo $less->compile(<<< EOF .block { padding: 3 + 4px } EOF); echo "</pre>\n"; </php>
.block { padding: 7px; }
mixin その 1 (擬似クラス)
<php> $less = new lessc; echo "<pre>\n"; echo $less->compile(<<< EOF .mixin { &:hover { color: red; } } #demo { .mixin; } EOF); echo "</pre>\n"; </php>
.mixin:hover { color: red; } #demo:hover { color: red; }
mixin その 2 (擬似要素)
<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>
.custom_scroll::-webkit-scrollbar { width: 10px; height: 10px; } .custom_scroll::-webkit-scrollbar-track { border-radius: 5px; box-shadow: inset 0 0 6px rgba(50,50,50,0.9); } .custom_scroll::-webkit-scrollbar-thumb { background-color: rgba(128,128,128,0.3); border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,0.3); } .dokuwiki .wrap_color_code::-webkit-scrollbar { width: 10px; height: 10px; } .dokuwiki .wrap_color_code::-webkit-scrollbar-track { border-radius: 5px; box-shadow: inset 0 0 6px rgba(50,50,50,0.9); } .dokuwiki .wrap_color_code::-webkit-scrollbar-thumb { background-color: rgba(128,128,128,0.3); border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,0.3); }
lesserphp テスト
参考文献
DokuWiki は Forkされた lessphp コンパイラ lesserphp 搭載している。
ja:devel:less [DokuWiki]