html_css:less [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Less - Leaner Style Sheets ======
本家: [[https://lesscss.org|Getting started | Less.js]]\\
ソースコード: [[git>less|Less - GitHub]]\\
CDN: [[https://www.jsdelivr.com/package/npm/less|less CDN by jsDelivr - A CDN for npm and GitHub]]\\

===== クライアントサイドで esm.sh を利用して less を埋め込む...🤔 =====
本家: [[https://esm.sh/|ESM>CDN]]\\

==== コード例 ====
<WRAP color_term>
<WRAP color_mincode><html><pre>
<font color="#FFFFFF">&lt;</font><font color="#F92672">style</font><font color="#F8F8F2"> </font><font color="#A6E22E">type=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">text/less</font><font color="#FFFFFF">&quot;&gt;</font>
<font color="#F8F8F2">  </font><font color="#F6AA11">#gozou_tbl</font><font color="#F8F8F2"> {</font>
<font color="#F8F8F2">    </font><font color="#F92672">table</font><font color="#F8F8F2"> {</font>
<font color="#F8F8F2">      </font><font color="#F92672">th</font><font color="#F8F8F2">, </font><font color="#F92672">td</font><font color="#F8F8F2"> {</font>
<font color="#F8F8F2">        </font><font color="#66D9EF">padding</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">10</font><font color="#F92672">px</font><font color="#FFFFFF">;</font>
<font color="#F8F8F2">        </font><font color="#66D9EF">width</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">54</font><font color="#F92672">px</font><font color="#FFFFFF">;</font>
<font color="#F8F8F2">      }</font>
<font color="#F8F8F2">      </font><font color="#F92672">td</font><font color="#F8F8F2"> { </font><font color="#66D9EF">vertical-align</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#66D9EF">middle</font><font color="#FFFFFF">;</font><font color="#F8F8F2"> }</font>
<font color="#F8F8F2">    }</font>
<font color="#F8F8F2">  }</font>
<font color="#F8F8F2">  </font><font color="#75715E">// bootstrap fix</font>
<font color="#F8F8F2">  </font><font color="#A6E22E">.table-striped</font><font color="#F8F8F2"> &gt; </font><font color="#F92672">tbody</font><font color="#F8F8F2"> &gt; </font><font color="#F92672">tr</font><font color="#A6E22E">:nth-of-type</font><font color="#FFFFFF">(</font><font color="#BE84FF">2</font><font color="#F92672">n</font><font color="#FFFFFF">)</font><font color="#F8F8F2"> {</font>
<font color="#F8F8F2">    </font><font color="#66D9EF">background-color</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#66D9EF">unset</font><font color="#FFFFFF">;</font>
<font color="#F8F8F2">  }</font>
<font color="#F8F8F2">  </font><font color="#A6E22E">.table</font><font color="#F8F8F2"> &gt; </font><font color="#F92672">tbody</font><font color="#F8F8F2"> &gt; </font><font color="#F92672">tr</font><font color="#A6E22E">:hover</font><font color="#F8F8F2"> </font><font color="#F92672">td</font><font color="#F8F8F2"> {</font>
<font color="#F8F8F2">    </font><font color="#66D9EF">color</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">#c00</font><font color="#FFFFFF">;</font>
<font color="#F8F8F2">    </font><font color="#75715E">//font-weight: bold;</font>
<font color="#F8F8F2">    </font>
<font color="#F8F8F2">    </font><font color="#75715E">//line-height: 1.6em;</font>
<font color="#F8F8F2">    </font><font color="#66D9EF">border-radius</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">.5</font><font color="#F92672">em</font><font color="#FFFFFF">;</font>
<font color="#F8F8F2">    </font><font color="#66D9EF">box-shadow</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#66D9EF">inset</font><font color="#F8F8F2"> </font><font color="#BE84FF">0</font><font color="#F8F8F2"> </font><font color="#BE84FF">0</font><font color="#F8F8F2"> </font><font color="#BE84FF">.7</font><font color="#F92672">em</font><font color="#F8F8F2"> </font><font color="#BE84FF">#fff</font><font color="#FFFFFF">;</font>
<font color="#F8F8F2">    </font><font color="#66D9EF">padding</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">.03</font><font color="#F92672">em</font><font color="#F8F8F2"> </font><font color="#BE84FF">.2</font><font color="#F92672">em</font><font color="#FFFFFF">;</font>
<font color="#F8F8F2">    </font><font color="#66D9EF">background-color</font><font color="#FFFFFF">:</font><font color="#F8F8F2"> </font><font color="#BE84FF">#4169E177</font><font color="#FFFFFF">;</font>
<font color="#F8F8F2">  }</font>
<font color="#FFFFFF">&lt;/</font><font color="#F92672">style</font><font color="#FFFFFF">&gt;</font>
</pre></html></WRAP>
<WRAP color_mincode><code>
<WRAP fsize20 #gozou_tbl>
^  五行  ^  五臟  ^  五腑  ^  五主  ^  五竅  ^  五情  ^  五色  ^  五季  ^  五味  ^
|  木  |  肝  |  胆  |  筋  |  目  |  怒  |  青  |  春  |  酸  |
|  火  |  心  |  小腸  |  血  |  舌  |  喜  |  赤  |  夏  |  苦  |
|  土  |  脾  |  胃  |  肌肉  |  口  |  思  |  黄  |  土用  |  甘  |
|  金  |  肺  |  大腸  |  皮  |  鼻  |  悲  |  白  |  秋  |  辛  |
|  水  |  腎  |  膀胱  |  骨  |  耳  |  驚  |  黒  |  冬  |  鹹  |
</WRAP>
</code></WRAP>
<WRAP color_mincode><html><pre>
<font color="#FFFFFF">&lt;</font><font color="#F92672">script</font><font color="#F8F8F2"> </font><font color="#A6E22E">type=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">module</font><font color="#FFFFFF">&quot;&gt;</font>
<font color="#F8F8F2">  </font><font color="#F92672">import</font><font color="#A6E22E"> </font><font color="#FFFFFF">less</font><font color="#A6E22E"> </font><font color="#F92672">from</font><font color="#A6E22E"> </font><font color="#E6DB74">&apos;https://esm.sh/less@4.2.2&apos;</font><font color="#A6E22E">;</font>
<font color="#A6E22E">  </font><font color="#FFFFFF">less.</font><font color="#A6E22E">refreshStyles();</font>
<font color="#FFFFFF">&lt;/</font><font color="#F92672">script</font><font color="#FFFFFF">&gt;</font>
</pre></html></WRAP>
</WRAP>

==== 実行例 ====
<html><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></html>
<WRAP fsize20 #gozou_tbl>
^  五行  ^  五臟  ^  五腑  ^  五主  ^  五竅  ^  五情  ^  五色  ^  五季  ^  五味  ^
|  木  |  肝  |  胆  |  筋  |  目  |  怒  |  青  |  春  |  酸  |
|  火  |  心  |  小腸  |  血  |  舌  |  喜  |  赤  |  夏  |  苦  |
|  土  |  脾  |  胃  |  肌肉  |  口  |  思  |  黄  |  土用  |  甘  |
|  金  |  肺  |  大腸  |  皮  |  鼻  |  悲  |  白  |  秋  |  辛  |
|  水  |  腎  |  膀胱  |  骨  |  耳  |  驚  |  黒  |  冬  |  鹹  |
</WRAP>
<html>
<script type="module">
  import less from 'https://esm.sh/less@4.2.2';
  less.refreshStyles();
</script>
</html>

===== 参考文献 =====

==== 付録 ====
[[tw>tomoyan596sp/status/1590470634743947264|JupyterLabでLess CSSでけた🤤

less.jsをcdんからロードする🤔
<script src="cdn.jsdelivr.net/npm/less@4/dis…"></script>
...
<style type="text/less">
  lessを書く🤤
</style>
...
refreshStylesで埋め込まれたLessを有効化する🤔
<script>
// Enable embedded Less CSS!
less.refreshStyles();
</script>]]\\