php:lessphp

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
php:lessphp [2022/09/11 06:37] – [lessphp - PHP で書かれた LESS コンパイラ] ともやんphp:lessphp [2022/09/26 06:40] (現在) – [mixin その 1] ともやん
行 2: 行 2:
 本家: [[http://lesscss.org/|Getting started | Less.js]]\\ 本家: [[http://lesscss.org/|Getting started | Less.js]]\\
 　　　[[https://leafo.net/lessphp/|LESS compiler in PHP - lessphp]]\\ 　　　[[https://leafo.net/lessphp/|LESS compiler in PHP - lessphp]]\\
 +　　　[[git>MarcusSchwarz/lesserphp|GitHub - MarcusSchwarz/lesserphp: LESS compiler written in PHP]]\\
 +ドキュメント: [[https://www.maswaba.de/lesserphpdocs/|lesserphp Documentation - maswaba.de]]\\
  
-[[git>MarcusSchwarz/lesserphp|GitHub - MarcusSchwarz/lesserphp: LESS compiler written in PHP]]\\ 
 Less (which stands for Leaner Style Sheets)\\ Less (which stands for Leaner Style Sheets)\\
 +
 +===== サンプル =====
 +
 +==== 演算 ====
 +<WRAP color_code mincode><code php>
 +<php>
 +$less = new lessc;
 +echo "<pre>\n";
 +echo $less->compile(<<< EOF
 +.block { padding: 3 + 4px }
 +EOF);
 +echo "</pre>\n";
 +</php>
 +</code></WRAP>
 +<WRAP color_code mincode><php>
 +$less = new lessc;
 +echo "<pre>\n";
 +echo $less->compile(<<< EOF
 +.block { padding: 3 + 4px }
 +EOF);
 +echo "</pre>\n";
 +</php></WRAP>
 +
 +==== mixin その 1 (擬似クラス) ====
 +<WRAP color_code mincode><code php>
 +<php>
 +$less = new lessc;
 +echo "<pre>\n";
 +echo $less->compile(<<< EOF
 +.mixin {
 +  &:hover {
 +    color: red;
 +  }
 +}
 +#demo {
 +  .mixin;
 +}
 +EOF);
 +echo "</pre>\n";
 +</php>
 +</code></WRAP>
 +<WRAP color_code mincode><php>
 +$less = new lessc;
 +echo "<pre>\n";
 +echo $less->compile(<<< EOF
 +.mixin {
 +  &:hover {
 +    color: red;
 +  }
 +}
 +#demo{
 +  .mixin;
 +}
 +EOF);
 +echo "</pre>\n";
 +</php></WRAP>
 +
 +==== mixin その 2 (擬似要素) ====
 +<WRAP color_code mincode><code php>
 +<php>
 +$less = new lessc;
 +echo "<pre>\n";
 +echo $less->compile(<<< EOF
 +.custom_scroll {
 +  &::-webkit-scrollbar {
 +    width: 10px;  // 縦スクロールバーの幅
 +    height: 10px; // 横スクロールバーの幅
 +  }
 +
 +  &::-webkit-scrollbar-track {
 +    border-radius: 5px;
 +    box-shadow: inset 0 0 6px rgba(50, 50, 50, .9);
 +  }
 +
 +  &::-webkit-scrollbar-thumb {
 +    background-color: rgba(128, 128, 128, .3);
 +    border-radius: 5px;
 +    box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
 +  }
 +}
 +
 +.dokuwiki {
 +  .wrap_color_code {
 +    // mixin
 +    .custom_scroll;
 +  }
 +}
 +EOF);
 +echo "</pre>\n";
 +</php>
 +</code></WRAP>
 +<WRAP color_code mincode><php>
 +$less = new lessc;
 +echo "<pre>\n";
 +echo $less->compile(<<< EOF
 +.custom_scroll {
 +  &::-webkit-scrollbar {
 +    width: 10px;  // 縦スクロールバーの幅
 +    height: 10px; // 横スクロールバーの幅
 +  }
 +
 +  &::-webkit-scrollbar-track {
 +    border-radius: 5px;
 +    box-shadow: inset 0 0 6px rgba(50, 50, 50, .9);
 +  }
 +
 +  &::-webkit-scrollbar-thumb {
 +    background-color: rgba(128, 128, 128, .3);
 +    border-radius: 5px;
 +    box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
 +  }
 +}
 +
 +.dokuwiki {
 +  .wrap_color_code {
 +    // mixin
 +    .custom_scroll;
 +  }
 +}
 +EOF);
 +echo "</pre>\n";
 +</php></WRAP>
 +
 +===== lesserphp テスト =====
 +<html>
 +<div class="embed_codemirror">
 +  <style>
 +    @import '/_media/javascript/codemirror/5.65.8/lib/codemirror.css';
 +    @import '/_media/javascript/codemirror/5.65.8/theme/cobalt.css';
 +    
 +    .dokuwiki pre {
 +      box-shadow: unset;
 +    }
 +    .embed_codemirror .CodeMirror * {
 +      font-family: "HackGen Console NFJ", Arial, monospace;
 +      font-size: 10px;
 +    }
 +  </style>
 + 
 +  <!-- <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.8/lib/codemirror.css"> -->
 +  <!-- <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.8/theme/cobalt.css"> -->
 +  <script src="/_media/javascript/codemirror/5.65.8/lib/codemirror.js"></script>
 +  <!-- 言語に応じたjsファイルを読み込む -->
 +  <script src="/_media/javascript/codemirror/5.65.8/mode/css/css.js"></script>
 + 
 +  <textarea id="editor_js">
 +div {
 +  .child-class { color: purple; }
 +  &.isa-class { color: green; }
 +  #child-id { height: 200px; }
 +  &#div-id { height: 400px; }
 +  &:hover { color: red; }
 +  :link { color: blue; }
 +}
 +  </textarea>
 +  CodeMirror Version: <label id="lblCdMirrVer"></label>
 + 
 +  <script>
 +  var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), {
 +    mode: "css",
 +    theme: "cobalt",
 +    lineNumbers: true,
 +    indentUnit: 2
 +  });
 +  document.getElementById('lblCdMirrVer').innerText = CodeMirror.version;
 +  </script>
 +</div>
 +</html>
  
 ===== 参考文献 ===== ===== 参考文献 =====
-**DokuWiki** は **LESS** コンパイラを搭載している。\\+**DokuWiki** は Forkされた **lessphp** コンパイラ [[git>MarcusSchwarz/lesserphp|lesserphp]] 搭載している。\\
 [[https://www.dokuwiki.org/start?id=ja:devel:less|ja:devel:less [DokuWiki]]]\\ [[https://www.dokuwiki.org/start?id=ja:devel:less|ja:devel:less [DokuWiki]]]\\
  
  • php/lessphp.1662845852.txt.gz
  • 最終更新: 2022/09/11 06:37
  • by ともやん