差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
| php:lessphp [2022/09/25 07:20] – ともやん | php:lessphp [2022/09/26 06:40] (現在) – [mixin その 1] ともやん | ||
|---|---|---|---|
| 行 7: | 行 7: | ||
| Less (which stands for Leaner Style Sheets)\\ | Less (which stands for Leaner Style Sheets)\\ | ||
| - | <WRAP color_code>< | + | ===== サンプル ===== |
| + | |||
| + | ==== 演算 ==== | ||
| + | <WRAP color_code | ||
| <php> | <php> | ||
| $less = new lessc; | $less = new lessc; | ||
| - | echo $less-> | + | 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 テスト ===== | ===== lesserphp テスト ===== | ||
| 行 18: | 行 133: | ||
| <div class=" | <div class=" | ||
| < | < | ||
| + | @import '/ | ||
| + | @import '/ | ||
| + | | ||
| .dokuwiki pre { | .dokuwiki pre { | ||
| box-shadow: unset; | box-shadow: unset; | ||
| + | } | ||
| + | .embed_codemirror .CodeMirror * { | ||
| + | font-family: | ||
| + | font-size: 10px; | ||
| } | } | ||
| </ | </ | ||
| - | <link rel=" | + | |
| - | <link rel=" | + | |
| <script src="/ | <script src="/ | ||
| <!-- 言語に応じたjsファイルを読み込む --> | <!-- 言語に応じたjsファイルを読み込む --> | ||
