文書の過去の版を表示しています。
Less - Leaner Style Sheets
本家: Getting started | Less.js
ソースコード: Less - GitHub
CDN: less CDN by jsDelivr - A CDN for npm and GitHub
クライアントサイドで esm.sh を利用して less を埋め込む...🤔
コード例:
<style type="text/less"> #gozou_tbl { table { th, td { padding: 10px; width: 54px; } td { vertical-align: middle; } } } // bootstrap fix .table-striped > tbody > tr:nth-of-type(2n) { background-color: unset; } .table > tbody > tr:hover td { color: #c00; //font-weight: bold; //line-height: 1.6em; border-radius: .5em; box-shadow: inset 0 0 .7em #fff; padding: .03em .2em; background-color: #4169E177; } </style>
<WRAP fsize20 #gozou_tbl> ^ 五行 ^ 五臟 ^ 五腑 ^ 五主 ^ 五竅 ^ 五情 ^ 五色 ^ 五季 ^ 五味 ^ | 木 | 肝 | 胆 | 筋 | 目 | 怒 | 青 | 春 | 酸 | | 火 | 心 | 小腸 | 血 | 舌 | 喜 | 赤 | 夏 | 苦 | | 土 | 脾 | 胃 | 肌肉 | 口 | 思 | 黄 | 土用 | 甘 | | 金 | 肺 | 大腸 | 皮 | 鼻 | 悲 | 白 | 秋 | 辛 | | 水 | 腎 | 膀胱 | 骨 | 耳 | 驚 | 黒 | 冬 | 鹹 | </WRAP>
<script type="importmap"> { "imports": { "less": "https://esm.sh/less@4.2.2" } } </script> <script type="module"> import less from "less"; // → https://esm.sh/less@4.2.2 less.refreshStyles(); </script>
実行例:
五行 | 五臟 | 五腑 | 五主 | 五竅 | 五情 | 五色 | 五季 | 五味 |
---|---|---|---|---|---|---|---|---|
木 | 肝 | 胆 | 筋 | 目 | 怒 | 青 | 春 | 酸 |
火 | 心 | 小腸 | 血 | 舌 | 喜 | 赤 | 夏 | 苦 |
土 | 脾 | 胃 | 肌肉 | 口 | 思 | 黄 | 土用 | 甘 |
金 | 肺 | 大腸 | 皮 | 鼻 | 悲 | 白 | 秋 | 辛 |
水 | 腎 | 膀胱 | 骨 | 耳 | 驚 | 黒 | 冬 | 鹹 |