差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
php:lessphp [2022/09/11 03:36] – ともやん | php:lessphp [2022/09/26 06:40] (現在) – [mixin その 1] ともやん | ||
---|---|---|---|
行 2: | 行 2: | ||
本家: [[http:// | 本家: [[http:// | ||
[[https:// | [[https:// | ||
+ | [[git> | ||
+ | ドキュメント: | ||
Less (which stands for Leaner Style Sheets)\\ | Less (which stands for Leaner Style Sheets)\\ | ||
+ | |||
+ | ===== サンプル ===== | ||
+ | |||
+ | ==== 演算 ==== | ||
+ | <WRAP color_code mincode>< | ||
+ | <php> | ||
+ | $less = new lessc; | ||
+ | echo "< | ||
+ | echo $less-> | ||
+ | .block { padding: 3 + 4px } | ||
+ | EOF); | ||
+ | echo "</ | ||
+ | </ | ||
+ | </ | ||
+ | <WRAP color_code mincode>< | ||
+ | $less = new lessc; | ||
+ | echo "< | ||
+ | echo $less-> | ||
+ | .block { padding: 3 + 4px } | ||
+ | EOF); | ||
+ | echo "</ | ||
+ | </ | ||
+ | |||
+ | ==== mixin その 1 (擬似クラス) ==== | ||
+ | <WRAP color_code mincode>< | ||
+ | <php> | ||
+ | $less = new lessc; | ||
+ | echo "< | ||
+ | echo $less-> | ||
+ | .mixin { | ||
+ | &:hover { | ||
+ | color: red; | ||
+ | } | ||
+ | } | ||
+ | #demo { | ||
+ | .mixin; | ||
+ | } | ||
+ | EOF); | ||
+ | echo "</ | ||
+ | </ | ||
+ | </ | ||
+ | <WRAP color_code mincode>< | ||
+ | $less = new lessc; | ||
+ | echo "< | ||
+ | echo $less-> | ||
+ | .mixin { | ||
+ | &:hover { | ||
+ | color: red; | ||
+ | } | ||
+ | } | ||
+ | #demo{ | ||
+ | .mixin; | ||
+ | } | ||
+ | EOF); | ||
+ | echo "</ | ||
+ | </ | ||
+ | |||
+ | ==== mixin その 2 (擬似要素) ==== | ||
+ | <WRAP color_code mincode>< | ||
+ | <php> | ||
+ | $less = new lessc; | ||
+ | echo "< | ||
+ | echo $less-> | ||
+ | .custom_scroll { | ||
+ | &:: | ||
+ | width: 10px; // 縦スクロールバーの幅 | ||
+ | height: 10px; // 横スクロールバーの幅 | ||
+ | } | ||
+ | |||
+ | &:: | ||
+ | border-radius: | ||
+ | box-shadow: inset 0 0 6px rgba(50, 50, 50, .9); | ||
+ | } | ||
+ | |||
+ | &:: | ||
+ | background-color: | ||
+ | border-radius: | ||
+ | box-shadow: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .dokuwiki { | ||
+ | .wrap_color_code { | ||
+ | // mixin | ||
+ | .custom_scroll; | ||
+ | } | ||
+ | } | ||
+ | EOF); | ||
+ | echo "</ | ||
+ | </ | ||
+ | </ | ||
+ | <WRAP color_code mincode>< | ||
+ | $less = new lessc; | ||
+ | echo "< | ||
+ | echo $less-> | ||
+ | .custom_scroll { | ||
+ | &:: | ||
+ | width: 10px; // 縦スクロールバーの幅 | ||
+ | height: 10px; // 横スクロールバーの幅 | ||
+ | } | ||
+ | |||
+ | &:: | ||
+ | border-radius: | ||
+ | box-shadow: inset 0 0 6px rgba(50, 50, 50, .9); | ||
+ | } | ||
+ | |||
+ | &:: | ||
+ | background-color: | ||
+ | border-radius: | ||
+ | box-shadow: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .dokuwiki { | ||
+ | .wrap_color_code { | ||
+ | // mixin | ||
+ | .custom_scroll; | ||
+ | } | ||
+ | } | ||
+ | EOF); | ||
+ | echo "</ | ||
+ | </ | ||
+ | |||
+ | ===== lesserphp テスト ===== | ||
+ | < | ||
+ | <div class=" | ||
+ | < | ||
+ | @import '/ | ||
+ | @import '/ | ||
+ | | ||
+ | .dokuwiki pre { | ||
+ | box-shadow: unset; | ||
+ | } | ||
+ | .embed_codemirror .CodeMirror * { | ||
+ | font-family: | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <!-- <link rel=" | ||
+ | <!-- <link rel=" | ||
+ | <script src="/ | ||
+ | <!-- 言語に応じたjsファイルを読み込む --> | ||
+ | <script src="/ | ||
+ | |||
+ | < | ||
+ | div { | ||
+ | .child-class { color: purple; } | ||
+ | & | ||
+ | #child-id { height: 200px; } | ||
+ | &# | ||
+ | &:hover { color: red; } | ||
+ | :link { color: blue; } | ||
+ | } | ||
+ | </ | ||
+ | CodeMirror Version: <label id=" | ||
+ | |||
+ | < | ||
+ | var jsEditor = CodeMirror.fromTextArea(document.getElementById(' | ||
+ | mode: " | ||
+ | theme: " | ||
+ | lineNumbers: | ||
+ | indentUnit: 2 | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
===== 参考文献 ===== | ===== 参考文献 ===== | ||
- | **DokuWiki** は **LESS** コンパイラを搭載している。\\ | + | **DokuWiki** は Forkされた |
[[https:// | [[https:// | ||