差分
このページの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ファイルを読み込む --> |