mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 21:21:21 +08:00
feat: add stylus.md cheatsheet. 7edba8e207
This commit is contained in:
jaywcjlove
@ -36,7 +36,7 @@
|
|||||||
}
|
}
|
||||||
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="less-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 210 90">
|
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="less-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 210 90">
|
||||||
<path d="M201.009375,32.7796875 C201.009375,26.053125 202.059375,22.0828125 202.059375,14.8640625 C202.059375,3.6421875 197.925,0.0328125 188.770313,0.0328125 L182.04375,0.0328125 L182.04375,7.9734375 L184.110938,7.9734375 C188.770313,7.9734375 189.7875,9.515625 189.7875,15.225 C189.7875,20.5734375 189.2625,25.921875 189.2625,32.1234375 C189.2625,40.0640625 191.854687,43.1484375 197.00625,44.3625 L197.00625,44.8875 C191.821875,46.1015625 189.2625,49.1859375 189.2625,57.1265625 C189.2625,63.328125 189.7875,68.3484375 189.7875,74.025 C189.7875,79.8984375 188.573437,81.440625 184.110938,81.440625 L184.110938,81.6046875 L182.04375,81.6046875 L182.04375,89.8734375 L188.770313,89.8734375 C197.892188,89.8734375 202.059375,86.2640625 202.059375,75.0421875 C202.059375,67.6265625 201.009375,63.8203125 201.009375,57.1265625 C201.009375,53.5171875 203.240625,49.7109375 209.967187,49.3828125 L209.967187,40.425 C203.240625,40.1953125 201.009375,36.3890625 201.009375,32.7796875 Z M166.359375,43.2796875 C161.175,41.2125 156.351562,39.9984375 156.351562,36.553125 C156.351562,33.9609375 158.41875,32.41875 162.225,32.41875 C166.03125,32.41875 169.476562,33.9609375 173.25,36.7171875 L180.140625,27.5953125 C175.842187,24.3140625 169.96875,20.86875 162.028125,20.86875 C150.314063,20.86875 142.373438,27.5953125 142.373438,37.078125 C142.373438,45.5109375 149.789063,49.8421875 155.990625,52.2375 C161.339063,54.3046875 166.523438,56.04375 166.523438,59.4890625 C166.523438,62.08125 164.45625,63.7875 159.796875,63.7875 C155.498438,63.7875 151.167188,62.0484375 146.507813,58.4390625 L139.617188,68.446875 C144.801563,72.7453125 152.709375,75.6984375 159.271875,75.6984375 C173.053125,75.6984375 180.46875,68.446875 180.46875,58.9640625 C180.46875,49.48125 173.085938,45.5109375 166.359375,43.2796875 L166.359375,43.2796875 Z M48.5953125,62.7703125 C47.38125,62.7703125 45.8390625,61.7203125 45.8390625,58.471875 L45.8390625,7.10542736e-15 L21.3609375,7.10542736e-15 C12.0421875,7.10542736e-15 7.9078125,3.609375 7.9078125,14.83125 C7.9078125,22.246875 8.9578125,26.38125 8.9578125,32.746875 C8.9578125,36.35625 6.7265625,40.1625 -6.99440506e-15,40.490625 L-6.99440506e-15,49.4484375 C6.7265625,49.6125 8.9578125,53.41875 8.9578125,57.028125 C8.9578125,63.39375 7.9078125,67.2 7.9078125,74.615625 C7.9078125,85.8375 12.0421875,89.446875 21.196875,89.446875 L27.9234375,89.446875 L27.9234375,81.50625 L25.85625,81.50625 C21.5578125,81.50625 20.1796875,79.7671875 20.1796875,74.090625 C20.1796875,68.4140625 20.7046875,63.5578125 20.7046875,57.1921875 C20.7046875,49.2515625 18.1125,46.1671875 12.9609375,44.953125 L12.9609375,44.428125 C18.1453125,43.2140625 20.7046875,40.1296875 20.7046875,32.1890625 C20.7046875,25.9875 20.1796875,20.9671875 20.1796875,15.290625 C20.1796875,9.6140625 21.39375,8.0390625 25.85625,8.0390625 L30.4828125,8.0390625 L30.4828125,57.5203125 C30.4828125,68.053125 34.0921875,74.94375 44.625,74.94375 C47.90625,74.94375 50.4984375,74.41875 52.36875,73.7296875 L50.6296875,62.5078125 C49.6125,62.7703125 49.1203125,62.7703125 48.5953125,62.7703125 Z M124.621875,43.2796875 C119.273437,41.2125 114.45,39.9984375 114.45,36.553125 C114.45,33.9609375 116.517187,32.41875 120.323437,32.41875 C124.129687,32.41875 127.575,33.9609375 131.348437,36.7171875 L138.239062,27.5953125 C133.940625,24.3140625 128.067187,20.86875 120.126562,20.86875 C108.4125,20.86875 100.471875,27.5953125 100.471875,37.078125 C100.471875,45.5109375 107.8875,49.8421875 114.089062,52.2375 C119.4375,54.3046875 124.621875,56.04375 124.621875,59.4890625 C124.621875,62.08125 122.554687,63.7875 117.895312,63.7875 C113.596875,63.7875 109.265625,62.0484375 104.60625,58.4390625 L97.8796875,68.446875 C103.064062,72.7453125 110.971875,75.6984375 117.534375,75.6984375 C131.315625,75.6984375 138.731358,68.446875 138.731358,58.9640625 C138.764062,49.48125 131.348437,45.5109375 124.621875,43.2796875 Z M73.7625,20.7046875 C61.1625,20.7046875 49.1203125,31.2375 49.4484375,47.775 C49.4484375,64.8375 60.6703125,74.8453125 75.46875,74.8453125 C81.6703125,74.8453125 88.5609375,72.6140625 93.909375,68.971875 L88.725,59.85 C84.91875,62.08125 81.309375,63.13125 77.503125,63.13125 C70.6125,63.13125 65.2640625,59.85 63.8859375,51.909375 L95.1234375,51.909375 C95.2875,50.6953125 95.6484375,48.3 95.6484375,45.54375 C95.8453125,31.565625 88.2328125,20.7046875 73.7625,20.7046875 L73.7625,20.7046875 Z M63.91875,42.4265625 C64.96875,35.5359375 69.103125,32.2546875 73.9265625,32.2546875 C80.128125,32.2546875 82.55625,36.553125 82.55625,42.4265625 L63.91875,42.4265625 L63.91875,42.4265625 Z" transform="translate(.033 .08)"></path></svg><a aria-hidden="true" tabindex="-1" href="#less-备忘清单"><span class="icon icon-link"></span></a>Less 备忘清单</h1><div class="wrap-body">
|
<path d="M201.009375,32.7796875 C201.009375,26.053125 202.059375,22.0828125 202.059375,14.8640625 C202.059375,3.6421875 197.925,0.0328125 188.770313,0.0328125 L182.04375,0.0328125 L182.04375,7.9734375 L184.110938,7.9734375 C188.770313,7.9734375 189.7875,9.515625 189.7875,15.225 C189.7875,20.5734375 189.2625,25.921875 189.2625,32.1234375 C189.2625,40.0640625 191.854687,43.1484375 197.00625,44.3625 L197.00625,44.8875 C191.821875,46.1015625 189.2625,49.1859375 189.2625,57.1265625 C189.2625,63.328125 189.7875,68.3484375 189.7875,74.025 C189.7875,79.8984375 188.573437,81.440625 184.110938,81.440625 L184.110938,81.6046875 L182.04375,81.6046875 L182.04375,89.8734375 L188.770313,89.8734375 C197.892188,89.8734375 202.059375,86.2640625 202.059375,75.0421875 C202.059375,67.6265625 201.009375,63.8203125 201.009375,57.1265625 C201.009375,53.5171875 203.240625,49.7109375 209.967187,49.3828125 L209.967187,40.425 C203.240625,40.1953125 201.009375,36.3890625 201.009375,32.7796875 Z M166.359375,43.2796875 C161.175,41.2125 156.351562,39.9984375 156.351562,36.553125 C156.351562,33.9609375 158.41875,32.41875 162.225,32.41875 C166.03125,32.41875 169.476562,33.9609375 173.25,36.7171875 L180.140625,27.5953125 C175.842187,24.3140625 169.96875,20.86875 162.028125,20.86875 C150.314063,20.86875 142.373438,27.5953125 142.373438,37.078125 C142.373438,45.5109375 149.789063,49.8421875 155.990625,52.2375 C161.339063,54.3046875 166.523438,56.04375 166.523438,59.4890625 C166.523438,62.08125 164.45625,63.7875 159.796875,63.7875 C155.498438,63.7875 151.167188,62.0484375 146.507813,58.4390625 L139.617188,68.446875 C144.801563,72.7453125 152.709375,75.6984375 159.271875,75.6984375 C173.053125,75.6984375 180.46875,68.446875 180.46875,58.9640625 C180.46875,49.48125 173.085938,45.5109375 166.359375,43.2796875 L166.359375,43.2796875 Z M48.5953125,62.7703125 C47.38125,62.7703125 45.8390625,61.7203125 45.8390625,58.471875 L45.8390625,7.10542736e-15 L21.3609375,7.10542736e-15 C12.0421875,7.10542736e-15 7.9078125,3.609375 7.9078125,14.83125 C7.9078125,22.246875 8.9578125,26.38125 8.9578125,32.746875 C8.9578125,36.35625 6.7265625,40.1625 -6.99440506e-15,40.490625 L-6.99440506e-15,49.4484375 C6.7265625,49.6125 8.9578125,53.41875 8.9578125,57.028125 C8.9578125,63.39375 7.9078125,67.2 7.9078125,74.615625 C7.9078125,85.8375 12.0421875,89.446875 21.196875,89.446875 L27.9234375,89.446875 L27.9234375,81.50625 L25.85625,81.50625 C21.5578125,81.50625 20.1796875,79.7671875 20.1796875,74.090625 C20.1796875,68.4140625 20.7046875,63.5578125 20.7046875,57.1921875 C20.7046875,49.2515625 18.1125,46.1671875 12.9609375,44.953125 L12.9609375,44.428125 C18.1453125,43.2140625 20.7046875,40.1296875 20.7046875,32.1890625 C20.7046875,25.9875 20.1796875,20.9671875 20.1796875,15.290625 C20.1796875,9.6140625 21.39375,8.0390625 25.85625,8.0390625 L30.4828125,8.0390625 L30.4828125,57.5203125 C30.4828125,68.053125 34.0921875,74.94375 44.625,74.94375 C47.90625,74.94375 50.4984375,74.41875 52.36875,73.7296875 L50.6296875,62.5078125 C49.6125,62.7703125 49.1203125,62.7703125 48.5953125,62.7703125 Z M124.621875,43.2796875 C119.273437,41.2125 114.45,39.9984375 114.45,36.553125 C114.45,33.9609375 116.517187,32.41875 120.323437,32.41875 C124.129687,32.41875 127.575,33.9609375 131.348437,36.7171875 L138.239062,27.5953125 C133.940625,24.3140625 128.067187,20.86875 120.126562,20.86875 C108.4125,20.86875 100.471875,27.5953125 100.471875,37.078125 C100.471875,45.5109375 107.8875,49.8421875 114.089062,52.2375 C119.4375,54.3046875 124.621875,56.04375 124.621875,59.4890625 C124.621875,62.08125 122.554687,63.7875 117.895312,63.7875 C113.596875,63.7875 109.265625,62.0484375 104.60625,58.4390625 L97.8796875,68.446875 C103.064062,72.7453125 110.971875,75.6984375 117.534375,75.6984375 C131.315625,75.6984375 138.731358,68.446875 138.731358,58.9640625 C138.764062,49.48125 131.348437,45.5109375 124.621875,43.2796875 Z M73.7625,20.7046875 C61.1625,20.7046875 49.1203125,31.2375 49.4484375,47.775 C49.4484375,64.8375 60.6703125,74.8453125 75.46875,74.8453125 C81.6703125,74.8453125 88.5609375,72.6140625 93.909375,68.971875 L88.725,59.85 C84.91875,62.08125 81.309375,63.13125 77.503125,63.13125 C70.6125,63.13125 65.2640625,59.85 63.8859375,51.909375 L95.1234375,51.909375 C95.2875,50.6953125 95.6484375,48.3 95.6484375,45.54375 C95.8453125,31.565625 88.2328125,20.7046875 73.7625,20.7046875 L73.7625,20.7046875 Z M63.91875,42.4265625 C64.96875,35.5359375 69.103125,32.2546875 73.9265625,32.2546875 C80.128125,32.2546875 82.55625,36.553125 82.55625,42.4265625 L63.91875,42.4265625 L63.91875,42.4265625 Z" transform="translate(.033 .08)"></path></svg><a aria-hidden="true" tabindex="-1" href="#less-备忘清单"><span class="icon icon-link"></span></a>Less 备忘清单</h1><div class="wrap-body">
|
||||||
<p>本备忘单旨在快速理解 <a href="https://github.com/lerna/lerna">Less</a> 所涉及的主要概念，显示了它的常用方法使用清单。</p>
|
<p>本备忘单旨在快速理解 <a href="https://github.com/less/less.js">Less</a> 所涉及的主要概念，显示了它的常用方法使用清单。</p>
|
||||||
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||||||
<p>Less(Leaner Style Sheets 的缩写)是一门向后兼容的 <a href="./css.html"><code>CSS</code></a> 扩展语言</p>
|
<p>Less(Leaner Style Sheets 的缩写)是一门向后兼容的 <a href="./css.html"><code>CSS</code></a> 扩展语言</p>
|
||||||
@ -888,6 +888,7 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li><a href="http://lesscss.org">Less.js 官网</a> <em>(lesscss.org)</em></li>
|
<li><a href="http://lesscss.org">Less.js 官网</a> <em>(lesscss.org)</em></li>
|
||||||
<li><a href="./css.html">CSS 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
<li><a href="./css.html">CSS 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||||||
|
<li><a href="./stylus.html">Stylus 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||||||
<li><a href="http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9">在线编译预览</a> <em>(lesscss.org)</em></li>
|
<li><a href="http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9">在线编译预览</a> <em>(lesscss.org)</em></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
|
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
|
||||||
|
|||||||
414
docs/stylus.html
Normal file
414
docs/stylus.html
Normal file
@ -0,0 +1,414 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" data-color-mode="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Stylus 备忘清单
|
||||||
|
& stylus cheatsheet & Quick Reference</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta description="本备忘单旨在快速理解 stylus 所涉及的主要概念，显示了它的常用方法使用清单。为开发人员分享快速参考备忘单。">
|
||||||
|
<meta keywords="Quick,Reference,cheatsheet,stylus">
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||||||
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
|
</head>
|
||||||
|
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||||||
|
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||||||
|
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||||||
|
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/stylus.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||||||
|
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||||||
|
</svg>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||||||
|
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||||||
|
</svg>
|
||||||
|
</button><script>
|
||||||
|
const LOCAL_NANE = '_dark_mode_theme_'
|
||||||
|
const rememberedValue = localStorage.getItem(LOCAL_NANE);
|
||||||
|
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
|
||||||
|
document.documentElement.setAttribute('data-color-mode', rememberedValue);
|
||||||
|
}
|
||||||
|
const button = document.querySelector('#darkMode');
|
||||||
|
button.onclick = () => {
|
||||||
|
const theme = document.documentElement.dataset.colorMode;
|
||||||
|
const mode = theme === 'light' ? 'dark' : 'light';
|
||||||
|
document.documentElement.setAttribute('data-color-mode', mode);
|
||||||
|
localStorage.setItem(LOCAL_NANE, mode);
|
||||||
|
}
|
||||||
|
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="stylus-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 64 64">
|
||||||
|
<path d="M9.864 42.916c1.66-1.986 1.855-4.036.57-7.844-.814-2.4-2.165-4.264-1.172-5.76 1.058-1.595 3.304-.05 1.432 2.083l.374.26c2.246.26 3.353-2.816 1.676-3.694-4.427-2.3-8.3 2.132-6.6 7.275.732 2.18 1.758 4.492.928 6.33-.716 1.58-2.1 2.506-3.027 2.54-1.937.098-.65-4.345 1.58-5.452.195-.098.472-.228.212-.553-2.75-.3-4.362.96-5.3 2.734-2.702 5.16 5.126 7.063 9.3 2.083zM58.2 27.748c.635 1.562 1.595 3.108 1.025 4.476-.472 1.172-1.1 1.66-1.774 1.774-.96.163-.7-2.848.944-3.743.146-.08.358-.472.163-.7-2.083-.114-3.255.88-3.9 2.197-1.84 3.857 4.166 4.915 7.112 1.123 1.172-1.514 1.22-3 .098-5.73-.716-1.725-1.806-3-1.123-4.15.732-1.204 2.5-.163 1.172 1.448l.293.163c1.7.098 2.4-2.18 1.107-2.75-3.434-1.465-6.64 2.23-5.126 5.9zM36.456 23.63c-1.188-.944-4.524.635-5.468 2.978-1.188 2.978-2.946 7.324-4.67 9.228-1.823 2.002-2.002.456-1.823-.7.423-2.718 3.076-9.016 4.524-10.8-.537-.797-4.052-.684-6.494 3.108-.9 1.432-2.995 6.2-5.306 9.96-.505.814-1.14.244-.65-1.66.553-2.197 2.18-8.235 4.28-12.987 5.5-1.1 11.343-1.855 15.82-1.872.602-.163 1-.7 0-.732-3.857-.13-9.65.325-15.07 1 1.04-2.063 2.163-3.733 3.3-4.433-1.237-.78-3.743-.472-5.175 1.644-.635.944-1.27 2.083-1.872 3.32-3.97.618-7.372 1.318-9.098 1.97-1.8.684-1.595 2.848-.505 2.44 2.262-.846 5.322-1.725 8.723-2.506-2.165 4.882-3.857 10.644-4.264 12.987-1 5.696 2.523 5.664 4.248 3.418 1.872-2.457 5.777-11.1 6.38-12 .18-.3.423-.146.293.13-4.362 8.707-3.987 12.076-.456 11.327 1.595-.342 4.345-3.076 5.06-4.492.146-.342.456-.3.4-.163-2.767 7.177-6.282 12.987-8.642 14.8-2.148 1.644-3.743-1.92 3.857-7.03 1.123-.765.602-1.806-.667-1.448-3.922.618-15.152 4.183-20.083 7.6-.374.26-.716.472-.7 1 .016.3.553.195.814.033 6.38-3.825 11.604-5.322 17.593-6.575.08.033.18.05.26.016.277-.065.26.08.08.195-.407.228-.814.44-.9.472-4.036 1.58-6.477 5.06-5.615 6.835.732 1.53 4.687.976 6.56-.033 4.6-2.5 7.926-7.372 10.204-14.1 1.986-5.973 4.492-12.743 5.078-12.938zM63.13 37.415c-7.47-.976-23.582.325-30.694 2.213-2.116.553-1.53 1.676-.456 1.465.016 0 .472-.114.488-.114 5.843-1.14 20.018-2.132 28.285-.553.993.18 3.97-2.8 2.376-3zm-24.6-.88c2.083-1.042 5.175-7.486 7.2-11.018.146-.26.407-.05.26.13-5.143 8.853-2.962 9.88-.928 9.748 2.718-.163 5.224-4.07 5.777-4.947.228-.342.358-.065.228.18-.13.407-.602 1.123-1.042 2.1-.618 1.383.033 1.92.57 2.165.846.407 3.157.146 3.515-1.27-2.3-.05 3.222-10.953 3.792-11.62-1.546-.895-3.938.08-5.03 2.23-2.327 4.606-4.28 8.316-5.5 8.38-2.376.13 2.734-10.27 3.564-10.595-.505-.732-3.743-.423-5.55 2.376-.65 1-4.622 8.04-5.598 9.195-1.725 2.05-1.855.293-1.367-1.758.163-.7.44-1.595.797-2.588 1.14-2.57 2.36-3.385 3.108-4.215 5.03-5.582 7.9-10.107 6.77-11.88-1-1.58-4.378-.88-6.542 2.376-3.987 5.973-7.665 14.16-8.137 17.902-.456 3.743 2.262 4.02 4.1 3.108zm2.116-10.953c.18-.407.293-.52.602-1.204 1.8-3.938 4.036-8.088 5.582-10.025.96-1 2.3.358-.13 4.1a37.625 37.625 0 0 1-4.834 6.038c-.456.52-.863.944-1.042 1.188-.13.163-.277.13-.18-.098z"></path>
|
||||||
|
</svg>
|
||||||
|
<a aria-hidden="true" tabindex="-1" href="#stylus-备忘清单"><span class="icon icon-link"></span></a>Stylus 备忘清单</h1><div class="wrap-body">
|
||||||
|
<p>本备忘单旨在快速理解 <a href="https://github.com/stylus/stylus">stylus</a> 所涉及的主要概念，显示了它的常用方法使用清单。</p>
|
||||||
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<p>为 Node.js 构建的富有表现力、健壮、功能丰富的 <a href="./css.html">CSS</a> 语言</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./css.html">CSS 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||||||
|
<li><a href="https://stylus-lang.com/try.html">在线编译预览</a> <em>(stylus-lang.com)</em></li>
|
||||||
|
</ul>
|
||||||
|
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># npm</span>
|
||||||
|
</span><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> stylus <span class="token parameter variable">-g</span>
|
||||||
|
</span><span class="code-line"><span class="token comment"># pnpm</span>
|
||||||
|
</span><span class="code-line">$ <span class="token function">pnpm</span> <span class="token function">add</span> <span class="token parameter variable">-g</span> stylus
|
||||||
|
</span></code></pre>
|
||||||
|
<p>在 Node.js 环境中使用 <code>stylus</code></p>
|
||||||
|
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ stylus one.styl two.styl
|
||||||
|
</span><span class="code-line"><span class="token comment"># stylus 从标准输入读取并输出到标准输出</span>
|
||||||
|
</span><span class="code-line">$ stylus <span class="token parameter variable">--compress</span> <span class="token operator"><</span> some.styl <span class="token operator">></span> some.css
|
||||||
|
</span><span class="code-line"><span class="token comment"># 将 css 目录中的文件编译输出到 `public/css`</span>
|
||||||
|
</span><span class="code-line">$ stylus css <span class="token parameter variable">--out</span> public/css
|
||||||
|
</span></code></pre>
|
||||||
|
<p>转换 CSS，输出 <code>*.styl</code> 文件</p>
|
||||||
|
<pre><code class="code-highlight"><span class="code-line">$ stylus --css < test.css > test.styl
|
||||||
|
</span><span class="code-line">$ stylus --css test.css /tmp/out.styl
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="支持-css-嵌套语法"><a aria-hidden="true" tabindex="-1" href="#支持-css-嵌套语法"><span class="icon icon-link"></span></a>支持 CSS 嵌套语法</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">.box <span class="token punctuation">{</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token selector">.button <span class="token punctuation">{</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>Stylus 是一个 CSS 预处理器。另见: <a href="http://stylus-lang.com/">stylus-lang.com</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="支持类-python-缩进语法"><a aria-hidden="true" tabindex="-1" href="#支持类-python-缩进语法"><span class="icon icon-link"></span></a>支持类 python 缩进语法</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">.box</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token selector">.button</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>也有效！冒号也是可选的。这通常用于 Stylus 文档的语法</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="混合-mixins"><a aria-hidden="true" tabindex="-1" href="#混合-mixins"><span class="icon icon-link"></span></a>混合 Mixins</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">caps-type</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token number">0.05</span><span class="token unit">em</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">h5</span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token func"><span class="token function">caps-type</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>编译 css 为：</p>
|
||||||
|
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">h5</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line"> <span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token number">0.05</span><span class="token unit">em</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见：下面<a href="#%E6%B7%B7%E5%90%88-Mixins">Mixins</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="变量-variables"><a aria-hidden="true" tabindex="-1" href="#变量-variables"><span class="icon icon-link"></span></a>变量 Variables</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">royal-blue</span> <span class="token operator">=</span> <span class="token hexcode">#36a</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">div</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> royal-<span class="token color">blue</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>标识符（变量名、函数等）也可以包括 <code>$</code> 字符</p>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">$font-size</span> <span class="token operator">=</span> <span class="token number">14</span><span class="token unit">px</span></span>
|
||||||
|
</span><span class="code-line"><span class="token selector">body <span class="token punctuation">{</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">font</span><span class="token punctuation">:</span> $font-size sans-serif<span class="token punctuation">;</span></span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见：<a href="https://stylus-lang.com/docs/variables.html">变量 Variables</a></p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="混合-mixins-1"><a aria-hidden="true" tabindex="-1" href="#混合-mixins-1"><span class="icon icon-link"></span></a>混合 Mixins</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="没有参数"><a aria-hidden="true" tabindex="-1" href="#没有参数"><span class="icon icon-link"></span></a>没有参数</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">red-border</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> solid <span class="token number">2</span><span class="token unit">px</span> <span class="token color">red</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">div</span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token func"><span class="token function">red-border</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/mixins.html">Mixins</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="有参数"><a aria-hidden="true" tabindex="-1" href="#有参数"><span class="icon icon-link"></span></a>有参数</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> n</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> n</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">div</span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span></span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>Mixins can be applied in two different ways.</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="参数默认值"><a aria-hidden="true" tabindex="-1" href="#参数默认值"><span class="icon icon-link"></span></a>参数默认值</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span>n <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> n</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="块混合"><a aria-hidden="true" tabindex="-1" href="#块混合"><span class="icon icon-link"></span></a>块混合</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">mobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token atrule-declaration"><span class="token atrule">@media</span> <span class="token punctuation">(</span>max-width<span class="token punctuation">:</span> <span class="token number">480</span><span class="token unit">px</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token interpolation variable"><span class="token delimiter punctuation">{</span>block<span class="token delimiter punctuation">}</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line">+<span class="token func"><span class="token function">mobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/mixins.html#block-mixins">块混合</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="rest-参数"><a aria-hidden="true" tabindex="-1" href="#rest-参数"><span class="icon icon-link"></span></a>Rest 参数</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">shadow</span><span class="token punctuation">(</span>offset-x<span class="token punctuation">,</span> args<span class="token operator">...</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">box-shadow</span><span class="token punctuation">:</span> offset-x args</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">margin-top</span><span class="token punctuation">:</span> offset-x</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">#login</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">shadow</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> <span class="token number">2</span><span class="token unit">px</span> <span class="token number">5</span><span class="token unit">px</span> <span class="token hexcode">#eee</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/vargs.html">Rest 参数</a></p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="函数-functions"><a aria-hidden="true" tabindex="-1" href="#函数-functions"><span class="icon icon-link"></span></a>函数 Functions</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数-functions-1"><a aria-hidden="true" tabindex="-1" href="#函数-functions-1"><span class="icon icon-link"></span></a>函数 Functions</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">add</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">a</span> <span class="token operator">+</span> b</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">body</span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/functions.html">Functions</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="参数默认值-1"><a aria-hidden="true" tabindex="-1" href="#参数默认值-1"><span class="icon icon-link"></span></a>参数默认值</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">add</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">a</span> <span class="token operator">+</span> b</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/functions.html#argument-defaults">参数默认值</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="命名参数"><a aria-hidden="true" tabindex="-1" href="#命名参数"><span class="icon icon-link"></span></a>命名参数</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">shadow</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">x</span> y <span class="token punctuation">(</span>y <span class="token operator">*</span> <span class="token number">1.5</span><span class="token punctuation">)</span> <span class="token hexcode">#000</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">.button</span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token property-declaration"><span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">shadow</span><span class="token punctuation">(</span>x<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">)</span></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/functions.html#named-parameters">命名参数</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="多个返回值"><a aria-hidden="true" tabindex="-1" href="#多个返回值"><span class="icon icon-link"></span></a>多个返回值</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">sizes</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token property-declaration"><span class="token property">8px</span> <span class="token number">16</span><span class="token unit">px</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">sizes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// → 8px</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">sizes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token comment">// → 16px</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/functions.html#multiple-return-values">多个返回值</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="arguments"><a aria-hidden="true" tabindex="-1" href="#arguments"><span class="icon icon-link"></span></a>arguments</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token variable-declaration"><span class="token variable">n</span> <span class="token operator">=</span> <span class="token number">0</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token statement"><span class="token keyword">for</span> num <span class="token operator">in</span> arguments</span>
|
||||||
|
</span><span class="code-line"> <span class="token variable-declaration"><span class="token variable">n</span> <span class="token operator">=</span> n <span class="token operator">+</span> num</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token comment">// => 15</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>参数 local 可用于所有函数体，并包含所有传递的参数</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="hash-示例"><a aria-hidden="true" tabindex="-1" href="#hash-示例"><span class="icon icon-link"></span></a>hash 示例</h3><div class="wrap-body">
|
||||||
|
<pre class="wrap-text "><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">get</span><span class="token punctuation">(</span>hash<span class="token punctuation">,</span> key<span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token statement"><span class="token keyword">return</span> pair<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token keyword">if</span> pair<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> key <span class="token keyword">for</span> pair <span class="token operator">in</span> hash</span>
|
||||||
|
</span><span class="code-line">
|
||||||
|
</span><span class="code-line"><span class="token variable-declaration"><span class="token variable">hash</span> <span class="token operator">=</span> <span class="token punctuation">(</span>one <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">(</span>two <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">(</span>three <span class="token number">3</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line">
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">get</span><span class="token punctuation">(</span>hash<span class="token punctuation">,</span> two<span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"><span class="token comment">// => 2</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="值-values"><a aria-hidden="true" tabindex="-1" href="#值-values"><span class="icon icon-link"></span></a>值 Values</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="条件赋值"><a aria-hidden="true" tabindex="-1" href="#条件赋值"><span class="icon icon-link"></span></a>条件赋值</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">royal-blue</span> <span class="token operator">=</span> <span class="token hexcode">#36a</span></span>
|
||||||
|
</span><span class="code-line highlight-line"><span class="token variable-declaration"><span class="token variable">royal-blue</span> <span class="token operator">?=</span> <span class="token hexcode">#89f</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">div</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> royal-<span class="token color">blue</span> <span class="token comment">// #36a</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p><code>?=</code> 只会在之前未设置的情况下设置变量</p>
|
||||||
|
<p>另见: <a href="https://stylus-lang.com/docs/operators.html#conditional-assignment--">条件赋值</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="属性查找"><a aria-hidden="true" tabindex="-1" href="#属性查找"><span class="icon icon-link"></span></a>属性查找</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">.logo</span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> w <span class="token operator">=</span> <span class="token number">150</span></span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token property-declaration"><span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">-</span><span class="token punctuation">(</span>w <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span></span></span>
|
||||||
|
</span><span class="code-line"> <span class="token comment">// or</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">-</span><span class="token punctuation">(</span>@height <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="https://stylus-lang.com/docs/variables.html#property-lookup">属性查找</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="插值"><a aria-hidden="true" tabindex="-1" href="#插值"><span class="icon icon-link"></span></a>插值</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token property-declaration"><span class="token property">-<span class="token interpolation variable"><span class="token delimiter punctuation">{</span>prefix<span class="token delimiter punctuation">}</span></span>-border-radius</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="https://stylus-lang.com/docs/interpolation.html">Interpolation</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="color-operators"><a aria-hidden="true" tabindex="-1" href="#color-operators"><span class="icon icon-link"></span></a>Color operators</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line">#888 + 50% <span class="token comment">// → #c3c3c3 (lighten)</span>
|
||||||
|
</span><span class="code-line">#888 - 50% <span class="token comment">// → #444 (darken)</span>
|
||||||
|
</span><span class="code-line">#f00 + 50deg <span class="token comment">// → #ffd500 (hue)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="casting"><a aria-hidden="true" tabindex="-1" href="#casting"><span class="icon icon-link"></span></a>Casting</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">n</span> <span class="token operator">=</span> <span class="token number">5</span><span class="token unit">px</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token property-declaration"><span class="token property">foo</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>n<span class="token punctuation">)</span>em</span>
|
||||||
|
</span><span class="code-line highlight-line"><span class="token property-declaration"><span class="token property">foo</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>n <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token operator">%</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="lookup"><a aria-hidden="true" tabindex="-1" href="#lookup"><span class="icon icon-link"></span></a>Lookup</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">light-blue</span> <span class="token operator">=</span> <span class="token hexcode">#3bd</span></span>
|
||||||
|
</span><span class="code-line"><span class="token variable-declaration"><span class="token variable">name</span> <span class="token operator">=</span> <span class="token string">'blue'</span></span>
|
||||||
|
</span><span class="code-line highlight-line"><span class="token func"><span class="token function">lookup</span><span class="token punctuation">(</span><span class="token string">'light-'</span> <span class="token operator">+</span> name<span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="https://stylus-lang.com/docs/bifs.html#lookupname">lookup</a></p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="高级功能"><a aria-hidden="true" tabindex="-1" href="#高级功能"><span class="icon icon-link"></span></a>高级功能</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="有条件的"><a aria-hidden="true" tabindex="-1" href="#有条件的"><span class="icon icon-link"></span></a>有条件的</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token statement"><span class="token keyword">if</span> color <span class="token operator">==</span> <span class="token color">blue</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> block</span>
|
||||||
|
</span><span class="code-line"><span class="token statement"><span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token boolean">true</span> <span class="token operator">and</span> <span class="token boolean">true</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> inline</span>
|
||||||
|
</span><span class="code-line"><span class="token statement"><span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token string">'hey'</span> <span class="token operator">is not</span> <span class="token string">'bye'</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> flex</span>
|
||||||
|
</span><span class="code-line"><span class="token selector">else</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> none</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>别名:</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>==</code></td><td align="left"><code>is</code></td></tr><tr><td align="left"><code>!=</code></td><td align="left"><code>is not</code></td></tr><tr><td align="left"><code>!=</code></td><td align="left"><code>isnt</code></td></tr></tbody></table>
|
||||||
|
<p>另见: <a href="https://stylus-lang.com/docs/functions.html#conditionals">Conditionals</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="对于循环"><a aria-hidden="true" tabindex="-1" href="#对于循环"><span class="icon icon-link"></span></a>对于循环</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">font-size-1</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token unit">px</span></span>
|
||||||
|
</span><span class="code-line"><span class="token variable-declaration"><span class="token variable">font-size-2</span> <span class="token operator">=</span> <span class="token number">20</span><span class="token unit">px</span></span>
|
||||||
|
</span><span class="code-line"><span class="token variable-declaration"><span class="token variable">font-size-3</span> <span class="token operator">=</span> <span class="token number">30</span><span class="token unit">px</span></span>
|
||||||
|
</span><span class="code-line"><span class="token statement"><span class="token keyword">for</span> i <span class="token operator">in</span> <span class="token number">1</span><span class="token operator">..</span><span class="token number">3</span></span>
|
||||||
|
</span><span class="code-line highlight-line"> <span class="token selector">.text-<span class="token interpolation variable"><span class="token delimiter punctuation">{</span>i<span class="token delimiter punctuation">}</span></span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> lookup<span class="token punctuation">(</span><span class="token string">'font-size-'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="定义检查"><a aria-hidden="true" tabindex="-1" href="#定义检查"><span class="icon icon-link"></span></a>定义检查</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token statement"><span class="token keyword">if</span> ohnoes <span class="token operator">is defined</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="https://stylus-lang.com/docs/operators.html#variable-definition-is-defined">is defined</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="false-值"><a aria-hidden="true" tabindex="-1" href="#false-值"><span class="icon icon-link"></span></a>False 值</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line">0
|
||||||
|
</span><span class="code-line">null
|
||||||
|
</span><span class="code-line">false
|
||||||
|
</span><span class="code-line"><span class="token string">''</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="类型检查"><a aria-hidden="true" tabindex="-1" href="#类型检查"><span class="icon icon-link"></span></a>类型检查</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token statement"><span class="token keyword">if</span> val <span class="token operator">is a</span> <span class="token string">'string'</span></span>
|
||||||
|
</span><span class="code-line"><span class="token statement"><span class="token keyword">if</span> val <span class="token operator">is a</span> <span class="token string">'ident'</span></span>
|
||||||
|
</span><span class="code-line"><span class="token statement"><span class="token keyword">if</span> <span class="token hexcode">#fff</span> <span class="token operator">is a</span> <span class="token string">'rgba'</span> <span class="token comment">// → true</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="https://stylus-lang.com/docs/operators.html#instance-check-is-a">Instance check</a></p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="内置函数"><a aria-hidden="true" tabindex="-1" href="#内置函数"><span class="icon icon-link"></span></a>内置函数</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap row-span-4"><div class="wrap-header h3wrap"><h3 id="颜色函数"><a aria-hidden="true" tabindex="-1" href="#颜色函数"><span class="icon icon-link"></span></a>颜色函数</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-4-->
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token hexcode">#fff</span><span class="token punctuation">)</span> <span class="token comment">//→ 1</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> </span><span class="token comment">//→ 0.2</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">dark</span><span class="token punctuation">(</span><span class="token color">black</span><span class="token punctuation">)</span> <span class="token comment">//→ true</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">light</span><span class="token punctuation">(</span><span class="token color">black</span><span class="token punctuation">)</span> <span class="token comment">//→ false</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">hue</span><span class="token punctuation">(</span><span class="token hexcode">#0a0</span><span class="token punctuation">)</span> <span class="token comment">//→ 50deg</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">saturation</span><span class="token punctuation">(</span><span class="token hexcode">#f00</span><span class="token punctuation">)</span> <span class="token comment">//→ 100%</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">lightness</span><span class="token punctuation">(</span><span class="token hexcode">#f00</span><span class="token punctuation">)</span> <span class="token comment">//→ 50%</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">luminosity</span><span class="token punctuation">(</span><span class="token hexcode">#f00</span><span class="token punctuation">)</span> <span class="token comment">//→ 0.2126</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">hue</span><span class="token punctuation">(</span><span class="token hexcode">#0a0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token unit">deg</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">saturation</span><span class="token punctuation">(</span><span class="token hexcode">#f00</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">lightness</span><span class="token punctuation">(</span><span class="token hexcode">#f00</span><span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">lighten</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> <span class="token number">10</span><span class="token unit">%</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">darken</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> <span class="token number">10</span><span class="token unit">%</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">saturate</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> <span class="token number">10</span><span class="token unit">%</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">desaturate</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> <span class="token number">10</span><span class="token unit">%</span><span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">invert</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">tint</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">)</span> <span class="token comment">// mix with white</span></span>
|
||||||
|
</span><span class="code-line"><span class="token func"><span class="token function">shade</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">)</span> <span class="token comment">// mix with black</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">unquote</span><span class="token punctuation">(</span>string<span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/bifs.html">Built-in functions</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="图片尺寸"><a aria-hidden="true" tabindex="-1" href="#图片尺寸"><span class="icon icon-link"></span></a>图片尺寸</h3><div class="wrap-body">
|
||||||
|
<p>返回给定图像的宽度和高度</p>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> image-size<span class="token punctuation">(</span><span class="token string">'tux.png'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span></span>
|
||||||
|
</span><span class="code-line"><span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> image-size<span class="token punctuation">(</span><span class="token string">'tux.png'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/bifs.html#image-sizepath">image-size</a></p>
|
||||||
|
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="缓存-caching"><a aria-hidden="true" tabindex="-1" href="#缓存-caching"><span class="icon icon-link"></span></a>缓存 Caching</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">size</span><span class="token punctuation">(</span>$width<span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> +<span class="token func"><span class="token function">cache</span><span class="token punctuation">(</span><span class="token string">'w'</span> <span class="token operator">+</span> $width<span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> $width</span>
|
||||||
|
</span><span class="code-line"><span class="token selector">.a <span class="token punctuation">{</span></span> <span class="token property-declaration"><span class="token property">size</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token punctuation">}</span></span>
|
||||||
|
</span><span class="code-line"><span class="token selector">.b <span class="token punctuation">{</span></span> <span class="token property-declaration"><span class="token property">size</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token punctuation">}</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token comment">// 输出: .a, b { width: 10px }</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>在第一次调用时将其内容应用于给定的选择器，但会在第二次调用时使用相同的参数 <code>@extend</code> 第一次调用的选择器。另见: <a href="http://stylus-lang.com/docs/bifs.html#cachekeys">cache</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="embed-url"><a aria-hidden="true" tabindex="-1" href="#embed-url"><span class="icon icon-link"></span></a>Embed URL</h3><div class="wrap-body">
|
||||||
|
<pre class="wrap-text "><code class="code-highlight"><span class="code-line">background: embedurl('logo.png')
|
||||||
|
</span><span class="code-line">// → background: url("data:image/png;base64,…")
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding">embedurl</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="添加属性"><a aria-hidden="true" tabindex="-1" href="#添加属性"><span class="icon icon-link"></span></a>添加属性</h3><div class="wrap-body">
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">gradient</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token func"><span class="token function">add-property</span><span class="token punctuation">(</span><span class="token string">'background-image'</span><span class="token punctuation">,</span> <span class="token func"><span class="token function">linear-gradient</span><span class="token punctuation">(</span>top<span class="token punctuation">,</span> color<span class="token punctuation">,</span> <span class="token func"><span class="token function">darken</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> <span class="token number">20</span><span class="token unit">%</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span></span></span>
|
||||||
|
</span><span class="code-line"> color
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">body</span>
|
||||||
|
</span><span class="code-line"> <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">gradient</span><span class="token punctuation">(</span><span class="token color">red</span><span class="token punctuation">)</span></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/bifs.html#add-propertyname-expr">add-property</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="sprintf"><a aria-hidden="true" tabindex="-1" href="#sprintf"><span class="icon icon-link"></span></a>sprintf</h3><div class="wrap-body">
|
||||||
|
<pre class="wrap-text "><code class="language-stylus code-highlight"><span class="code-line"><span class="token string">'-webkit-gradient(%s, %s, %s)'</span> % <span class="token punctuation">(</span>linear <span class="token punctuation">(</span>0 0<span class="token punctuation">)</span> <span class="token punctuation">(</span>0 100%<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||||
|
</span><span class="code-line"><span class="token comment">// → -webkit-gradient(linear, 0 0, 0 100%)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text -->
|
||||||
|
<hr>
|
||||||
|
<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">s</span><span class="token punctuation">(</span><span class="token string">"rgba(0, 0, 0, %s)"</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">)</span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另见: <a href="http://stylus-lang.com/docs/bifs.html#sfmt-">s</a></p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||||||
|
<ul>
|
||||||
|
<li><a href="./css.html">CSS 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||||||
|
<li><a href="https://stylus-lang.com/try.html">在线编译预览</a> <em>(stylus-lang.com)</em></li>
|
||||||
|
<li><a href="./lessjs.html">Less.js 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||||||
|
</ul>
|
||||||
|
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
|
||||||
|
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
||||||
|
window.onhashchange = function () {
|
||||||
|
anchorPoint()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function anchorPoint() {
|
||||||
|
const hash = window.location.hash?.replace(/^#/, '') || '';
|
||||||
|
const elm = document.getElementById(decodeURIComponent(hash));
|
||||||
|
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
|
||||||
|
if (elm?.tagName === 'H3') {
|
||||||
|
elm?.parentElement?.parentElement?.classList.add('active');
|
||||||
|
const box = elm?.parentElement?.parentElement;
|
||||||
|
console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
anchorPoint();
|
||||||
|
</script></body>
|
||||||
|
</html>
|
||||||
@ -96,6 +96,10 @@
|
|||||||
<path d="m16.214 6.762-.075.391c-.116.741-.074.953.244 1.228l.307.254-.318 1.418c-.19.846-.423 1.555-.571 1.788-.127.201-.275.497-.307.656-.053.19-.233.381-.508.55-.243.138-.72.508-1.058.805-.27.243-.456.392-.557.456l-.33.261a1.4 1.4 0 0 0-.189.411c-.023.107-.01.178.024.23.033.05.09.085.168.107a.954.954 0 0 0 .282.023 3 3 0 0 0 .632-.112c.07-.019.125-.037.173-.053.074-.091.245-.263.548-.562.804-.793 1.111-1.227.794-1.11-.117.042-.064-.064.137-.276.424-.413.667-1.037 1.175-2.994.402-1.545.402-1.567.698-1.567.139 0 .532.024.532.024V6.762h-.902zm3.839 3.165c-.064 0-.17.096-.233.202-.116.19.021.306 1.767 1.396 1.037.657 1.873 1.217 1.852 1.26-.021.031-.868.582-1.883 1.217-1.842 1.142-1.852 1.153-1.683 1.386.212.275 0 .37 2.391-1.122L24 13.155v-.836l-1.937-1.196c-1.047-.656-1.957-1.185-2.01-1.196zm-16.085.117c-.053 0-.963.54-2.01 1.185L0 12.425v.836l1.947 1.217c1.08.666 1.99 1.217 2.032 1.217.042 0 .127-.096.212-.212.127-.201.02-.286-1.768-1.418C.72 12.996.54 12.848.71 12.732c.106-.074.91-.572 1.778-1.111 1.979-1.217 1.873-1.133 1.714-1.387-.063-.105-.17-.2-.233-.19zm8.684.023c-.292-.002-.92.443-2.8 1.978-.081.193-.088.326-.051.412.024.059.068.1.129.13.06.03.138.048.224.055.171.015.373-.012.536-.044l.11-.025a.386.386 0 0 1 .144-.118c.116-.064.603-.508 1.09-.984.857-.868 1.058-1.26.709-1.387a.24.24 0 0 0-.09-.017zm2.196.603c-.257.007-.72.305-1.513.938-.398.323-.65.497-.785.533l-.524.414c-.197.36-.226.583-.174.706a.25.25 0 0 0 .138.134.644.644 0 0 0 .24.045 2.18 2.18 0 0 0 .58-.085 3.466 3.466 0 0 0 .291-.092l.029-.012.053-.028c.1-.129.33-.372.618-.652.91-.878 1.375-1.502 1.28-1.735-.043-.113-.117-.17-.233-.166zm-2.424 1.08c-.074.008-.24.136-.539.398-.432.382-.903.602-1.066.504a3.97 3.97 0 0 1-.114.024c-.166.033-.373.06-.558.045a.708.708 0 0 1-.252-.063.337.337 0 0 1-.168-.17c-.037-.09-.037-.202.005-.345l-.65.534-1.471 1.217v1.973l4.82-3.797a.41.41 0 0 1 .016-.123c.037-.134.035-.202-.023-.196zm2.074.639c-.073 0-.195.103-.39.31-.265.283-.682.557-.903.613l-.034.018a2.191 2.191 0 0 1-.11.042c-.06.02-.138.044-.228.068-.18.049-.404.094-.604.089a.732.732 0 0 1-.275-.054.344.344 0 0 1-.184-.18c-.058-.139-.035-.334.092-.611L7.61 16.033v1.205h1.868l3.962-3.112c.103-.114.258-.27.467-.465.56-.519.687-.698.687-.963 0-.206-.023-.31-.096-.31zm.943 1.95-.339.338c-.19.18-.529.402-.761.497l-.046.02-.003.005-.01.01c-.009.007-.013.008-.02.011a3.432 3.432 0 0 1-.282.093 3.058 3.058 0 0 1-.65.115 1.035 1.035 0 0 1-.31-.027.364.364 0 0 1-.218-.144c-.048-.074-.062-.173-.035-.295a1.11 1.11 0 0 1 .095-.25l-3.197 2.526h4.252l.508-.582c.698-.814 1.016-1.396 1.016-1.894z"></path>
|
<path d="m16.214 6.762-.075.391c-.116.741-.074.953.244 1.228l.307.254-.318 1.418c-.19.846-.423 1.555-.571 1.788-.127.201-.275.497-.307.656-.053.19-.233.381-.508.55-.243.138-.72.508-1.058.805-.27.243-.456.392-.557.456l-.33.261a1.4 1.4 0 0 0-.189.411c-.023.107-.01.178.024.23.033.05.09.085.168.107a.954.954 0 0 0 .282.023 3 3 0 0 0 .632-.112c.07-.019.125-.037.173-.053.074-.091.245-.263.548-.562.804-.793 1.111-1.227.794-1.11-.117.042-.064-.064.137-.276.424-.413.667-1.037 1.175-2.994.402-1.545.402-1.567.698-1.567.139 0 .532.024.532.024V6.762h-.902zm3.839 3.165c-.064 0-.17.096-.233.202-.116.19.021.306 1.767 1.396 1.037.657 1.873 1.217 1.852 1.26-.021.031-.868.582-1.883 1.217-1.842 1.142-1.852 1.153-1.683 1.386.212.275 0 .37 2.391-1.122L24 13.155v-.836l-1.937-1.196c-1.047-.656-1.957-1.185-2.01-1.196zm-16.085.117c-.053 0-.963.54-2.01 1.185L0 12.425v.836l1.947 1.217c1.08.666 1.99 1.217 2.032 1.217.042 0 .127-.096.212-.212.127-.201.02-.286-1.768-1.418C.72 12.996.54 12.848.71 12.732c.106-.074.91-.572 1.778-1.111 1.979-1.217 1.873-1.133 1.714-1.387-.063-.105-.17-.2-.233-.19zm8.684.023c-.292-.002-.92.443-2.8 1.978-.081.193-.088.326-.051.412.024.059.068.1.129.13.06.03.138.048.224.055.171.015.373-.012.536-.044l.11-.025a.386.386 0 0 1 .144-.118c.116-.064.603-.508 1.09-.984.857-.868 1.058-1.26.709-1.387a.24.24 0 0 0-.09-.017zm2.196.603c-.257.007-.72.305-1.513.938-.398.323-.65.497-.785.533l-.524.414c-.197.36-.226.583-.174.706a.25.25 0 0 0 .138.134.644.644 0 0 0 .24.045 2.18 2.18 0 0 0 .58-.085 3.466 3.466 0 0 0 .291-.092l.029-.012.053-.028c.1-.129.33-.372.618-.652.91-.878 1.375-1.502 1.28-1.735-.043-.113-.117-.17-.233-.166zm-2.424 1.08c-.074.008-.24.136-.539.398-.432.382-.903.602-1.066.504a3.97 3.97 0 0 1-.114.024c-.166.033-.373.06-.558.045a.708.708 0 0 1-.252-.063.337.337 0 0 1-.168-.17c-.037-.09-.037-.202.005-.345l-.65.534-1.471 1.217v1.973l4.82-3.797a.41.41 0 0 1 .016-.123c.037-.134.035-.202-.023-.196zm2.074.639c-.073 0-.195.103-.39.31-.265.283-.682.557-.903.613l-.034.018a2.191 2.191 0 0 1-.11.042c-.06.02-.138.044-.228.068-.18.049-.404.094-.604.089a.732.732 0 0 1-.275-.054.344.344 0 0 1-.184-.18c-.058-.139-.035-.334.092-.611L7.61 16.033v1.205h1.868l3.962-3.112c.103-.114.258-.27.467-.465.56-.519.687-.698.687-.963 0-.206-.023-.31-.096-.31zm.943 1.95-.339.338c-.19.18-.529.402-.761.497l-.046.02-.003.005-.01.01c-.009.007-.013.008-.02.011a3.432 3.432 0 0 1-.282.093 3.058 3.058 0 0 1-.65.115 1.035 1.035 0 0 1-.31-.027.364.364 0 0 1-.218-.144c-.048-.074-.062-.173-.035-.295a1.11 1.11 0 0 1 .095-.25l-3.197 2.526h4.252l.508-.582c.698-.814 1.016-1.396 1.016-1.894z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span>Styled Components</span></a><!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
|
<span>Styled Components</span></a><!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
|
||||||
|
<a href="./docs/stylus.html" style="background: rgb(109 161 63/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 64 64">
|
||||||
|
<path d="M9.864 42.916c1.66-1.986 1.855-4.036.57-7.844-.814-2.4-2.165-4.264-1.172-5.76 1.058-1.595 3.304-.05 1.432 2.083l.374.26c2.246.26 3.353-2.816 1.676-3.694-4.427-2.3-8.3 2.132-6.6 7.275.732 2.18 1.758 4.492.928 6.33-.716 1.58-2.1 2.506-3.027 2.54-1.937.098-.65-4.345 1.58-5.452.195-.098.472-.228.212-.553-2.75-.3-4.362.96-5.3 2.734-2.702 5.16 5.126 7.063 9.3 2.083zM58.2 27.748c.635 1.562 1.595 3.108 1.025 4.476-.472 1.172-1.1 1.66-1.774 1.774-.96.163-.7-2.848.944-3.743.146-.08.358-.472.163-.7-2.083-.114-3.255.88-3.9 2.197-1.84 3.857 4.166 4.915 7.112 1.123 1.172-1.514 1.22-3 .098-5.73-.716-1.725-1.806-3-1.123-4.15.732-1.204 2.5-.163 1.172 1.448l.293.163c1.7.098 2.4-2.18 1.107-2.75-3.434-1.465-6.64 2.23-5.126 5.9zM36.456 23.63c-1.188-.944-4.524.635-5.468 2.978-1.188 2.978-2.946 7.324-4.67 9.228-1.823 2.002-2.002.456-1.823-.7.423-2.718 3.076-9.016 4.524-10.8-.537-.797-4.052-.684-6.494 3.108-.9 1.432-2.995 6.2-5.306 9.96-.505.814-1.14.244-.65-1.66.553-2.197 2.18-8.235 4.28-12.987 5.5-1.1 11.343-1.855 15.82-1.872.602-.163 1-.7 0-.732-3.857-.13-9.65.325-15.07 1 1.04-2.063 2.163-3.733 3.3-4.433-1.237-.78-3.743-.472-5.175 1.644-.635.944-1.27 2.083-1.872 3.32-3.97.618-7.372 1.318-9.098 1.97-1.8.684-1.595 2.848-.505 2.44 2.262-.846 5.322-1.725 8.723-2.506-2.165 4.882-3.857 10.644-4.264 12.987-1 5.696 2.523 5.664 4.248 3.418 1.872-2.457 5.777-11.1 6.38-12 .18-.3.423-.146.293.13-4.362 8.707-3.987 12.076-.456 11.327 1.595-.342 4.345-3.076 5.06-4.492.146-.342.456-.3.4-.163-2.767 7.177-6.282 12.987-8.642 14.8-2.148 1.644-3.743-1.92 3.857-7.03 1.123-.765.602-1.806-.667-1.448-3.922.618-15.152 4.183-20.083 7.6-.374.26-.716.472-.7 1 .016.3.553.195.814.033 6.38-3.825 11.604-5.322 17.593-6.575.08.033.18.05.26.016.277-.065.26.08.08.195-.407.228-.814.44-.9.472-4.036 1.58-6.477 5.06-5.615 6.835.732 1.53 4.687.976 6.56-.033 4.6-2.5 7.926-7.372 10.204-14.1 1.986-5.973 4.492-12.743 5.078-12.938zM63.13 37.415c-7.47-.976-23.582.325-30.694 2.213-2.116.553-1.53 1.676-.456 1.465.016 0 .472-.114.488-.114 5.843-1.14 20.018-2.132 28.285-.553.993.18 3.97-2.8 2.376-3zm-24.6-.88c2.083-1.042 5.175-7.486 7.2-11.018.146-.26.407-.05.26.13-5.143 8.853-2.962 9.88-.928 9.748 2.718-.163 5.224-4.07 5.777-4.947.228-.342.358-.065.228.18-.13.407-.602 1.123-1.042 2.1-.618 1.383.033 1.92.57 2.165.846.407 3.157.146 3.515-1.27-2.3-.05 3.222-10.953 3.792-11.62-1.546-.895-3.938.08-5.03 2.23-2.327 4.606-4.28 8.316-5.5 8.38-2.376.13 2.734-10.27 3.564-10.595-.505-.732-3.743-.423-5.55 2.376-.65 1-4.622 8.04-5.598 9.195-1.725 2.05-1.855.293-1.367-1.758.163-.7.44-1.595.797-2.588 1.14-2.57 2.36-3.385 3.108-4.215 5.03-5.582 7.9-10.107 6.77-11.88-1-1.58-4.378-.88-6.542 2.376-3.987 5.973-7.665 14.16-8.137 17.902-.456 3.743 2.262 4.02 4.1 3.108zm2.116-10.953c.18-.407.293-.52.602-1.204 1.8-3.938 4.036-8.088 5.582-10.025.96-1 2.3.358-.13 4.1a37.625 37.625 0 0 1-4.834 6.038c-.456.52-.863.944-1.042 1.188-.13.163-.277.13-.18-.098z"></path>
|
||||||
|
</svg>
|
||||||
|
<span>Stylus</span></a><!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));-->
|
||||||
<a href="./docs/html.html" style="background: rgb(228 77 39/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" height="1em" width="1em">
|
<a href="./docs/html.html" style="background: rgb(228 77 39/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" height="1em" width="1em">
|
||||||
<path d="m64 32 34.94 403.21L255.77 480 413 435.15 448 32Zm308 132H188l4 51h176l-13.51 151.39L256 394.48l-98.68-28-6.78-77.48h48.26l3.42 39.29L256 343.07l53.42-14.92L315 264H148l-12.59-149.59H376.2Z"></path>
|
<path d="m64 32 34.94 403.21L255.77 480 413 435.15 448 32Zm308 132H188l4 51h176l-13.51 151.39L256 394.48l-98.68-28-6.78-77.48h48.26l3.42 39.29L256 343.07l53.42-14.92L315 264H148l-12.59-149.59H376.2Z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
Reference in New Issue
Block a user