mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-20 22:17:32 +08:00
feat: add es6.md
cheatsheet. b258494776
This commit is contained in:
@ -34,15 +34,15 @@
|
||||
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="sass"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 64 64" height="1em" width="1em">
|
||||
</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 h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="sass"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 64 64" height="1em" width="1em">
|
||||
<path d="M55.094 35.56a13.19 13.19 0 0 0-5.8 1.35c-.6-1.188-1.2-2.225-1.3-3-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588a14.36 14.36 0 0 0-.538 1.913c-.225 1.175-2.575 5.338-3.913 7.526-.438-.85-.813-1.6-.888-2.2-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588-.263 1.138-.538 1.913c-.263.775-3.388 7.726-4.2 9.538-.413.925-.775 1.663-1.038 2.163s-.012.038-.037.088l-.35.663v.012c-.175.313-.363.613-.45.613-.062 0-.188-.838.025-1.988.463-2.413 1.588-6.176 1.575-6.313 0-.062.213-.725-.725-1.063-.913-.338-1.238.225-1.313.225s-.138.2-.138.2 1.013-4.238-1.938-4.238c-1.85 0-4.4 2.013-5.663 3.85l-6.376 3.488-.138-.15C11.178 35.66 4.565 32.96 4.84 27.835c.1-1.863.75-6.776 12.7-12.726 9.788-4.875 17.627-3.538 18.99-.563 1.938 4.25-4.188 12.15-14.364 13.29-3.875.438-5.913-1.063-6.426-1.625-.538-.588-.613-.613-.813-.5-.325.175-.125.7 0 1.013.3.788 1.55 2.188 3.675 2.888 1.863.613 6.413.95 11.914-1.175 6.163-2.388 10.976-9.013 9.563-14.55-1.438-5.638-10.788-7.488-19.627-4.35C15.19 11.41 9.5 14.334 5.4 18.172.515 22.722-.26 26.698.064 28.348c1.138 5.888 9.25 9.726 12.5 12.564l-.45.25c-1.625.8-7.813 4.038-9.363 7.463-1.75 3.875.275 6.663 1.625 7.038 4.175 1.163 8.45-.925 10.763-4.363 2.3-3.438 2.025-7.9.963-9.938l-.038-.075 1.275-.75a74.573 74.573 0 0 1 2.35-1.325c-.4 1.088-.688 2.375-.838 4.25-.175 2.2.725 5.05 1.913 6.176.525.488 1.15.5 1.538.5 1.375 0 2-1.138 2.688-2.5.85-1.663 1.6-3.588 1.6-3.588s-.938 5.213 1.625 5.213c.938 0 1.875-1.213 2.3-1.838v.012s.025-.038.075-.125c.1-.15.15-.238.15-.238v-.025c.375-.65 1.213-2.138 2.463-4.6 1.613-3.175 3.163-7.15 3.163-7.15s.15.975.613 2.575c.275.95.875 1.988 1.338 3l-.6.825.012.013a35.62 35.62 0 0 1-.988 1.25c-1.275 1.525-2.8 3.263-3 3.763-.238.588-.188 1.025.275 1.375.338.25.938.3 1.575.25 1.15-.075 1.95-.363 2.35-.538a8.14 8.14 0 0 0 2.025-1.063c1.25-.925 2.013-2.238 1.938-3.988-.038-.963-.35-1.913-.738-2.813l.338-.5c1.975-2.888 3.5-6.063 3.5-6.063s.15.975.613 2.575c.238.813.713 1.7 1.138 2.575-1.85 1.513-3.013 3.263-3.413 4.413-.738 2.125-.163 3.088.925 3.313.488.1 1.188-.125 1.713-.35a7.76 7.76 0 0 0 2.163-1.113c1.25-.925 2.45-2.213 2.388-3.95-.038-.8-.25-1.588-.538-2.338 1.575-.65 3.613-1.025 6.2-.713 5.563.65 6.663 4.125 6.45 5.575s-1.375 2.25-1.763 2.5c-.388.238-.513.325-.475.5.05.263.225.25.563.2.463-.075 2.925-1.188 3.025-3.863.15-3.438-3.113-7.188-8.9-7.15zM12.19 50.025c-1.838 2.013-4.425 2.775-5.525 2.125-1.188-.688-.725-3.65 1.538-5.788 1.375-1.3 3.163-2.5 4.338-3.238l1.138-.688c.075-.05.125-.075.125-.075.088-.05.188-.113.288-.175.838 3.05.038 5.725-1.9 7.838zm13.44-9.138c-.638 1.563-1.988 5.575-2.8 5.35-.7-.188-1.125-3.225-.138-6.226.5-1.513 1.563-3.313 2.188-4.013 1.013-1.125 2.113-1.5 2.388-1.038.325.6-1.238 4.95-1.638 5.926zm11.088 5.3c-.275.138-.525.238-.638.163-.088-.05.113-.238.113-.238s1.388-1.488 1.938-2.175l1.088-1.388v.15c0 1.8-1.725 3-2.5 3.488zm8.55-1.95c-.2-.15-.175-.613.5-2.063.263-.575.863-1.538 1.9-2.45.125.375.2.738.188 1.075-.013 2.25-1.613 3.088-2.588 3.438z"></path>
|
||||
</svg>
|
||||
<a aria-hidden="true" tabindex="-1" href="#sass"><span class="icon icon-link"></span></a>Sass</h1><div class="wrap-body">
|
||||
<p>这是一份快速参考备忘单,列出了 <a href="https://sass-lang.com">SASS</a> 最有用的功能。</p>
|
||||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#sass-基础">Sass 基础</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#变量">变量</a><a aria-hidden="true" class="leve3 tocs-link" href="#字符串插值">字符串插值</a><a aria-hidden="true" class="leve3 tocs-link" href="#注释">注释</a><a aria-hidden="true" class="leve3 tocs-link" href="#extend">Extend</a><a aria-hidden="true" class="leve3 tocs-link" href="#嵌套nesting">嵌套(Nesting)</a><a aria-hidden="true" class="leve3 tocs-link" href="#模块片段">模块(片段)</a><a aria-hidden="true" class="leve3 tocs-link" href="#混合mixins">混合(Mixins)</a><a aria-hidden="true" class="leve3 tocs-link" href="#import">@import</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-混合mixins">Sass 混合(Mixins)</a><a aria-hidden="true" class="leve3 tocs-link" href="#参数">参数</a><a aria-hidden="true" class="leve3 tocs-link" href="#默认值">默认值</a><a aria-hidden="true" class="leve3 tocs-link" href="#默认变量">默认变量</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-颜色函数">Sass 颜色函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#rgba">rgba</a><a aria-hidden="true" class="leve3 tocs-link" href="#mixing">Mixing</a><a aria-hidden="true" class="leve3 tocs-link" href="#修改-hsla">修改 HSLA</a><a aria-hidden="true" class="leve3 tocs-link" href="#获取值">获取值</a><a aria-hidden="true" class="leve4 tocs-link" href="#hsla">HSLA</a><a aria-hidden="true" class="leve4 tocs-link" href="#rgb">RGB</a><a aria-hidden="true" class="leve3 tocs-link" href="#sass-内置了对颜色值的支持">Sass 内置了对颜色值的支持</a><a aria-hidden="true" class="leve3 tocs-link" href="#调整">调整</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-其他函数">Sass 其他函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#字符串">字符串</a><a aria-hidden="true" class="leve3 tocs-link" href="#numbers">Numbers</a><a aria-hidden="true" class="leve3 tocs-link" href="#units">Units</a><a aria-hidden="true" class="leve3 tocs-link" href="#units-1">Units</a><a aria-hidden="true" class="leve3 tocs-link" href="#misc">Misc</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-功能检查">Sass 功能检查</a><a aria-hidden="true" class="leve3 tocs-link" href="#功能检查">功能检查</a><a aria-hidden="true" class="leve3 tocs-link" href="#功能">功能</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-循环">Sass 循环</a><a aria-hidden="true" class="leve3 tocs-link" href="#for-循环">For 循环</a><a aria-hidden="true" class="leve3 tocs-link" href="#each-循环简单">Each 循环(简单)</a><a aria-hidden="true" class="leve3 tocs-link" href="#each-循环嵌套">Each 循环(嵌套)</a><a aria-hidden="true" class="leve3 tocs-link" href="#while-循环">While 循环</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-其它功能">Sass 其它功能</a><a aria-hidden="true" class="leve3 tocs-link" href="#条件句">条件句</a><a aria-hidden="true" class="leve3 tocs-link" href="#插值">插值</a><a aria-hidden="true" class="leve3 tocs-link" href="#列表">列表</a><a aria-hidden="true" class="leve3 tocs-link" href="#maps">Maps</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="sass-基础"><a aria-hidden="true" tabindex="-1" href="#sass-基础"><span class="icon icon-link"></span></a>Sass 基础</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">
|
||||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#sass-基础">Sass 基础</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#变量">变量</a><a aria-hidden="true" class="leve3 tocs-link" href="#字符串插值">字符串插值</a><a aria-hidden="true" class="leve3 tocs-link" href="#注释">注释</a><a aria-hidden="true" class="leve3 tocs-link" href="#extend">Extend</a><a aria-hidden="true" class="leve3 tocs-link" href="#嵌套nesting">嵌套(Nesting)</a><a aria-hidden="true" class="leve3 tocs-link" href="#模块片段">模块(片段)</a><a aria-hidden="true" class="leve3 tocs-link" href="#混合mixins">混合(Mixins)</a><a aria-hidden="true" class="leve3 tocs-link" href="#import">@import</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-混合mixins">Sass 混合(Mixins)</a><a aria-hidden="true" class="leve3 tocs-link" href="#参数">参数</a><a aria-hidden="true" class="leve3 tocs-link" href="#默认值">默认值</a><a aria-hidden="true" class="leve3 tocs-link" href="#默认变量">默认变量</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-颜色函数">Sass 颜色函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#rgba">rgba</a><a aria-hidden="true" class="leve3 tocs-link" href="#mixing">Mixing</a><a aria-hidden="true" class="leve3 tocs-link" href="#修改-hsla">修改 HSLA</a><a aria-hidden="true" class="leve3 tocs-link" href="#获取值">获取值</a><a aria-hidden="true" class="leve4 tocs-link" href="#hsla">HSLA</a><a aria-hidden="true" class="leve4 tocs-link" href="#rgb">RGB</a><a aria-hidden="true" class="leve3 tocs-link" href="#sass-内置了对颜色值的支持">Sass 内置了对颜色值的支持</a><a aria-hidden="true" class="leve3 tocs-link" href="#调整">调整</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-其他函数">Sass 其他函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#字符串">字符串</a><a aria-hidden="true" class="leve3 tocs-link" href="#numbers">Numbers</a><a aria-hidden="true" class="leve3 tocs-link" href="#units">Units</a><a aria-hidden="true" class="leve3 tocs-link" href="#units-1">Units</a><a aria-hidden="true" class="leve3 tocs-link" href="#misc">Misc</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-功能检查">Sass 功能检查</a><a aria-hidden="true" class="leve3 tocs-link" href="#功能检查">功能检查</a><a aria-hidden="true" class="leve3 tocs-link" href="#功能">功能</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-循环">Sass 循环</a><a aria-hidden="true" class="leve3 tocs-link" href="#for-循环">For 循环</a><a aria-hidden="true" class="leve3 tocs-link" href="#each-循环简单">Each 循环(简单)</a><a aria-hidden="true" class="leve3 tocs-link" href="#each-循环嵌套">Each 循环(嵌套)</a><a aria-hidden="true" class="leve3 tocs-link" href="#while-循环">While 循环</a><a aria-hidden="true" class="leve2 tocs-link" href="#sass-其它功能">Sass 其它功能</a><a aria-hidden="true" class="leve3 tocs-link" href="#条件句">条件句</a><a aria-hidden="true" class="leve3 tocs-link" href="#插值">插值</a><a aria-hidden="true" class="leve3 tocs-link" href="#列表">列表</a><a aria-hidden="true" class="leve3 tocs-link" href="#maps">Maps</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="sass-基础"><a aria-hidden="true" tabindex="-1" href="#sass-基础"><span class="icon icon-link"></span></a>Sass 基础</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist 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-->
|
||||
<ul>
|
||||
<li><a href="https://sass-lang.com/documentation">Sass 官方文档</a> <em>(sass-lang.com)</em></li>
|
||||
@ -56,19 +56,19 @@
|
||||
</span><span class="code-line">$ sass <span class="token parameter variable">--watch</span> input.scss output.css
|
||||
</span><span class="code-line">$ sass <span class="token parameter variable">--watch</span> app/sass:public/css
|
||||
</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token property"><span class="token variable">$defaultLinkColor</span></span><span class="token punctuation">:</span> #46EAC2<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token selector">a </span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$defaultLinkColor</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token property"><span class="token variable">$wk</span></span><span class="token punctuation">:</span> -webkit-<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token selector">.rounded-box </span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property"><span class="token variable">#{$wk}</span>border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token comment">/*
|
||||
</span></span><span class="code-line"><span class="token comment"> 这是多行注释
|
||||
</span></span><span class="code-line"><span class="token comment"> 块注释
|
||||
@ -76,7 +76,7 @@
|
||||
</span></span><span class="code-line"><span class="token comment">*/</span>
|
||||
</span><span class="code-line"><span class="token comment">// 这是一条单行注释</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="extend"><a aria-hidden="true" tabindex="-1" href="#extend"><span class="icon icon-link"></span></a>Extend</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="extend"><a aria-hidden="true" tabindex="-1" href="#extend"><span class="icon icon-link"></span></a>Extend</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token selector">.button </span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> ···
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
@ -84,7 +84,7 @@
|
||||
</span><span class="code-line"> <span class="token keyword">@extend</span> .button<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="嵌套nesting"><a aria-hidden="true" tabindex="-1" href="#嵌套nesting"><span class="icon icon-link"></span></a>嵌套(Nesting)</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="嵌套nesting"><a aria-hidden="true" tabindex="-1" href="#嵌套nesting"><span class="icon icon-link"></span></a>嵌套(Nesting)</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token selector">nav </span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token selector">ul </span><span class="token punctuation">{</span>
|
||||
@ -109,7 +109,7 @@
|
||||
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><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">
|
||||
</div></div></div><div class="wrap h3body-not-exist 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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token comment">// _base.scss</span>
|
||||
</span><span class="code-line"><span class="token property"><span class="token variable">$font-stack</span></span><span class="token punctuation">:</span> Helvetica<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
|
||||
@ -130,7 +130,7 @@
|
||||
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token keyword">@mixin</span> <span class="token selector">heading-font </span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
|
||||
@ -140,7 +140,7 @@
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p>查看: <a href="#sass-%E6%B7%B7%E5%90%88mixins">混合(Mixins)</a></p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="import"><a aria-hidden="true" tabindex="-1" href="#import"><span class="icon icon-link"></span></a>@import</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="import"><a aria-hidden="true" tabindex="-1" href="#import"><span class="icon icon-link"></span></a>@import</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token keyword">@import</span> <span class="token string">'./other_sass_file'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token keyword">@import</span> <span class="token string">'/code'</span><span class="token punctuation">,</span> <span class="token string">'lists'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token comment">// 纯 CSS @imports</span>
|
||||
@ -148,8 +148,8 @@
|
||||
</span><span class="code-line"><span class="token keyword">@import</span> <span class="token url">url</span><span class="token punctuation">(</span>theme<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p><code>.sass</code> 或 <code>.sass</code> 扩展名是可选的。</p>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="sass-混合mixins"><a aria-hidden="true" tabindex="-1" href="#sass-混合mixins"><span class="icon icon-link"></span></a>Sass 混合(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">
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="sass-混合mixins"><a aria-hidden="true" tabindex="-1" href="#sass-混合mixins"><span class="icon icon-link"></span></a>Sass 混合(Mixins)</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token keyword">@mixin</span> <span class="token function">font-size</span><span class="token punctuation">(</span><span class="token variable">$n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token variable">$n</span> <span class="token operator">*</span> 1.2em<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
@ -159,7 +159,7 @@
|
||||
</span><span class="code-line"> <span class="token keyword">@include</span> <span class="token function">font-size</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token keyword">@mixin</span> <span class="token function">pad</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$n</span></span><span class="token punctuation">:</span> 10px<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token variable">$n</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
@ -169,7 +169,7 @@
|
||||
</span><span class="code-line"> <span class="token keyword">@include</span> <span class="token function">pad</span><span class="token punctuation">(</span>15px<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token property"><span class="token variable">$default-padding</span></span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token keyword">@mixin</span> <span class="token function">pad</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$n</span></span><span class="token punctuation">:</span> <span class="token variable">$default-padding</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token variable">$n</span><span class="token punctuation">;</span>
|
||||
@ -178,17 +178,17 @@
|
||||
</span><span class="code-line"> <span class="token keyword">@include</span> <span class="token function">pad</span><span class="token punctuation">(</span>15px<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="sass-颜色函数"><a aria-hidden="true" tabindex="-1" href="#sass-颜色函数"><span class="icon icon-link"></span></a>Sass 颜色函数</h2><div class="wrap-body">
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="sass-颜色函数"><a aria-hidden="true" tabindex="-1" href="#sass-颜色函数"><span class="icon icon-link"></span></a>Sass 颜色函数</h2><div class="wrap-body">
|
||||
<!--rehype:body-class=cols-2-->
|
||||
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="rgba"><a aria-hidden="true" tabindex="-1" href="#rgba"><span class="icon icon-link"></span></a>rgba</h3><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="rgba"><a aria-hidden="true" tabindex="-1" href="#rgba"><span class="icon icon-link"></span></a>rgba</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">rgb</span><span class="token punctuation">(</span>100<span class="token punctuation">,</span> 120<span class="token punctuation">,</span> 140<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">rgba</span><span class="token punctuation">(</span>100<span class="token punctuation">,</span> 120<span class="token punctuation">,</span> 140<span class="token punctuation">,</span> .5<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> .5<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="mixing"><a aria-hidden="true" tabindex="-1" href="#mixing"><span class="icon icon-link"></span></a>Mixing</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="mixing"><a aria-hidden="true" tabindex="-1" href="#mixing"><span class="icon icon-link"></span></a>Mixing</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$a</span><span class="token punctuation">,</span> <span class="token variable">$b</span><span class="token punctuation">,</span> 10%<span class="token punctuation">)</span> <span class="token comment">// 10% a, 90% b</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="修改-hsla"><a aria-hidden="true" tabindex="-1" href="#修改-hsla"><span class="icon icon-link"></span></a>修改 HSLA</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="修改-hsla"><a aria-hidden="true" tabindex="-1" href="#修改-hsla"><span class="icon icon-link"></span></a>修改 HSLA</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">darken</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> 5%<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> 5%<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
@ -204,15 +204,15 @@
|
||||
</span><span class="code-line"><span class="token function">fade-out</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> .5<span class="token punctuation">)</span> <span class="token comment">// aka transparentize()</span>
|
||||
</span><span class="code-line"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> .5<span class="token punctuation">)</span> <span class="token comment">// sets alpha to .5</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><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">
|
||||
</div></div></div><div class="wrap h3body-exist 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-->
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="hsla"><a aria-hidden="true" tabindex="-1" href="#hsla"><span class="icon icon-link"></span></a>HSLA</h4><div class="wrap-body">
|
||||
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="hsla"><a aria-hidden="true" tabindex="-1" href="#hsla"><span class="icon icon-link"></span></a>HSLA</h4><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">hue</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token comment">// 0deg..360deg</span>
|
||||
</span><span class="code-line"><span class="token function">saturation</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token comment">// 0%..100%</span>
|
||||
</span><span class="code-line"><span class="token function">lightness</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token comment">// 0%..100%</span>
|
||||
</span><span class="code-line"><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token comment">// 0..1 (aka opacity())</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="rgb"><a aria-hidden="true" tabindex="-1" href="#rgb"><span class="icon icon-link"></span></a>RGB</h4><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="rgb"><a aria-hidden="true" tabindex="-1" href="#rgb"><span class="icon icon-link"></span></a>RGB</h4><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">red</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token comment">// 0..255</span>
|
||||
</span><span class="code-line"><span class="token function">green</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">blue</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span>
|
||||
@ -253,13 +253,13 @@
|
||||
|
||||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>color.red()</code></td><td align="left">用于获取颜色的红色通道</td></tr><tr><td align="left"><code>color.green()</code></td><td align="left">用于获得颜色的绿色通道</td></tr><tr><td align="left"><code>color.blue()</code></td><td align="left">用于获取颜色的蓝色通道</td></tr><tr><td align="left"><code>color.hue()</code></td><td align="left">以获得颜色的色调</td></tr><tr><td align="left"><code>color.saturation()</code></td><td align="left">用于获得颜色的饱和度</td></tr><tr><td align="left"><code>color.lightness()</code></td><td align="left">以获得颜色的亮度</td></tr></tbody></table>
|
||||
<p>另见: <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method">hue()</a>, <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method">red()</a></p>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="sass-内置了对颜色值的支持"><a aria-hidden="true" tabindex="-1" href="#sass-内置了对颜色值的支持"><span class="icon icon-link"></span></a>Sass 内置了对颜色值的支持</h3><div class="wrap-body">
|
||||
</div></div></div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="sass-内置了对颜色值的支持"><a aria-hidden="true" tabindex="-1" href="#sass-内置了对颜色值的支持"><span class="icon icon-link"></span></a>Sass 内置了对颜色值的支持</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token keyword">@debug</span> <span class="token function">rgb</span><span class="token punctuation">(</span>204<span class="token punctuation">,</span> 102<span class="token punctuation">,</span> 153<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// #c69</span>
|
||||
</span><span class="code-line"><span class="token keyword">@debug</span> <span class="token function">rgba</span><span class="token punctuation">(</span>107<span class="token punctuation">,</span> 113<span class="token punctuation">,</span> 127<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgba(107, 113, 127, 0.8)</span>
|
||||
</span><span class="code-line"><span class="token keyword">@debug</span> <span class="token function">hsl</span><span class="token punctuation">(</span>228<span class="token punctuation">,</span> 7%<span class="token punctuation">,</span> 86%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// #dadbdf</span>
|
||||
</span><span class="code-line"><span class="token keyword">@debug</span> <span class="token function">hsla</span><span class="token punctuation">(</span>20<span class="token punctuation">,</span> 20%<span class="token punctuation">,</span> 85%<span class="token punctuation">,</span> 0.7<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgb(225, 215, 210, 0.7)</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token comment">// 固定金额变动</span>
|
||||
</span><span class="code-line"><span class="token function">adjust-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$blue</span></span><span class="token punctuation">:</span> 5<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">adjust-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$lightness</span></span><span class="token punctuation">:</span> -30%<span class="token punctuation">)</span> <span class="token comment">// darken(_, 30%)</span>
|
||||
@ -272,8 +272,8 @@
|
||||
</span><span class="code-line"><span class="token function">change-color</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$blue</span></span><span class="token punctuation">:</span> 250<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>支持的: <code>$red</code>, <code>$green</code>, <code>$blue</code>, <code>$hue</code>, <code>$saturation</code>, <code>$lightness</code>, <code>$alpha</code></p>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="sass-其他函数"><a aria-hidden="true" tabindex="-1" href="#sass-其他函数"><span class="icon icon-link"></span></a>Sass 其他函数</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">
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="sass-其他函数"><a aria-hidden="true" tabindex="-1" href="#sass-其他函数"><span class="icon icon-link"></span></a>Sass 其他函数</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist 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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">unquote</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">quote</span><span class="token punctuation">(</span>bold<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "bold"</span>
|
||||
@ -287,7 +287,7 @@
|
||||
</span><span class="code-line"><span class="token function">str-slice</span><span class="token punctuation">(</span>hello<span class="token punctuation">,</span> 2<span class="token punctuation">,</span> 5<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">str-insert</span><span class="token punctuation">(</span><span class="token string">"abcd"</span><span class="token punctuation">,</span> <span class="token string">"X"</span><span class="token punctuation">,</span> 1<span class="token punctuation">)</span> <span class="token comment">// "Xabcd"</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="numbers"><a aria-hidden="true" tabindex="-1" href="#numbers"><span class="icon icon-link"></span></a>Numbers</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="numbers"><a aria-hidden="true" tabindex="-1" href="#numbers"><span class="icon icon-link"></span></a>Numbers</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">floor</span><span class="token punctuation">(</span>4.2<span class="token punctuation">)</span> <span class="token comment">// 4</span>
|
||||
</span><span class="code-line"><span class="token function">ceil</span><span class="token punctuation">(</span>4.2<span class="token punctuation">)</span> <span class="token comment">// 5</span>
|
||||
@ -303,15 +303,15 @@
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">percentage</span><span class="token punctuation">(</span>.5<span class="token punctuation">)</span> <span class="token comment">// 50%</span>
|
||||
</span><span class="code-line"><span class="token function">random</span><span class="token punctuation">(</span>3<span class="token punctuation">)</span> <span class="token comment">// 0..3</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="units"><a aria-hidden="true" tabindex="-1" href="#units"><span class="icon icon-link"></span></a>Units</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="units"><a aria-hidden="true" tabindex="-1" href="#units"><span class="icon icon-link"></span></a>Units</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">unit</span><span class="token punctuation">(</span>3em<span class="token punctuation">)</span> <span class="token comment">// 'em'</span>
|
||||
</span><span class="code-line"><span class="token function">unitless</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span> <span class="token comment">// false</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="units-1"><a aria-hidden="true" tabindex="-1" href="#units-1"><span class="icon icon-link"></span></a>Units</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="units-1"><a aria-hidden="true" tabindex="-1" href="#units-1"><span class="icon icon-link"></span></a>Units</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">unit</span><span class="token punctuation">(</span>3em<span class="token punctuation">)</span> <span class="token comment">// 'em'</span>
|
||||
</span><span class="code-line"><span class="token function">unitless</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span> <span class="token comment">// false</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="misc"><a aria-hidden="true" tabindex="-1" href="#misc"><span class="icon icon-link"></span></a>Misc</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="misc"><a aria-hidden="true" tabindex="-1" href="#misc"><span class="icon icon-link"></span></a>Misc</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token comment">// 检查 $red</span>
|
||||
</span><span class="code-line"><span class="token function">variable-exists</span><span class="token punctuation">(</span>red<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token comment">// 检查@mixin red-text</span>
|
||||
@ -331,9 +331,9 @@
|
||||
</span><span class="code-line"><span class="token function">selector-replace</span><span class="token punctuation">(</span>...<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">selector-unify</span><span class="token punctuation">(</span>...<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="sass-功能检查"><a aria-hidden="true" tabindex="-1" href="#sass-功能检查"><span class="icon icon-link"></span></a>Sass 功能检查</h2><div class="wrap-body">
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="sass-功能检查"><a aria-hidden="true" tabindex="-1" href="#sass-功能检查"><span class="icon icon-link"></span></a>Sass 功能检查</h2><div class="wrap-body">
|
||||
<!--rehype:body-class=cols-2-->
|
||||
</div></div><div class="h2wrap-body cols-2"><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 cols-2"><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line">meta.<span class="token function">feature-exists</span><span class="token punctuation">(</span><span class="token variable">$feature</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">feature-exists</span><span class="token punctuation">(</span><span class="token variable">$feature</span><span class="token punctuation">)</span> <span class="token comment">//=> boolean</span>
|
||||
</span></code></pre>
|
||||
@ -348,7 +348,7 @@
|
||||
</span><span class="code-line"> <span class="token comment">// Content!</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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">
|
||||
|
||||
|
||||
|
||||
@ -380,8 +380,8 @@
|
||||
|
||||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>global-variable-shadowing</code> <a href="https://sass-lang.com/documentation/modules/meta#feature-exists">#</a></td><td align="left">这意味着局部变量将隐藏全局变量,除非它具有 <code>!global</code> 标志</td></tr><tr><td align="left"><code>extend-selector-pseudoclass</code> <a href="https://sass-lang.com/documentation/modules/meta#feature-exists">#</a></td><td align="left">这意味着 <code>@extend</code> 规则将影响嵌套在伪类中的选择器,如 <code>:not()</code></td></tr><tr><td align="left"><code>units-level-3</code> <a href="https://sass-lang.com/documentation/modules/meta#feature-exists">#</a></td><td align="left">这意味着单位算术支持在 CSS 值和单位级别 3 中定义的单位</td></tr><tr><td align="left"><code>at-error</code> <a href="https://sass-lang.com/documentation/modules/meta#feature-exists">#</a></td><td align="left">这意味着支持 <code>@error</code> 规则</td></tr><tr><td align="left"><code>custom-property</code> <a href="https://sass-lang.com/documentation/modules/meta#feature-exists">#</a></td><td align="left">这意味着自定义属性声明值不支持除插值之外的任何表达式</td></tr></tbody></table>
|
||||
<!--rehype:className=style-list-arrow-->
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="sass-循环"><a aria-hidden="true" tabindex="-1" href="#sass-循环"><span class="icon icon-link"></span></a>Sass 循环</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="for-循环"><a aria-hidden="true" tabindex="-1" href="#for-循环"><span class="icon icon-link"></span></a>For 循环</h3><div class="wrap-body">
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="sass-循环"><a aria-hidden="true" tabindex="-1" href="#sass-循环"><span class="icon icon-link"></span></a>Sass 循环</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="for-循环"><a aria-hidden="true" tabindex="-1" href="#for-循环"><span class="icon icon-link"></span></a>For 循环</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token property"><span class="token variable">$base-color</span></span><span class="token punctuation">:</span> #036<span class="token punctuation">;</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">@for</span> <span class="token variable">$i</span> <span class="token keyword">from</span> 1 <span class="token keyword">through</span> <span class="token selector">3 </span><span class="token punctuation">{</span>
|
||||
@ -403,7 +403,7 @@
|
||||
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#0059b3</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="each-循环简单"><a aria-hidden="true" tabindex="-1" href="#each-循环简单"><span class="icon icon-link"></span></a>Each 循环(简单)</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="each-循环简单"><a aria-hidden="true" tabindex="-1" href="#each-循环简单"><span class="icon icon-link"></span></a>Each 循环(简单)</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token property"><span class="token variable">$sizes</span></span><span class="token punctuation">:</span> 40px<span class="token punctuation">,</span> 50px<span class="token punctuation">;</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$size</span> in <span class="token variable">$sizes</span> </span><span class="token punctuation">{</span>
|
||||
@ -424,7 +424,7 @@
|
||||
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="each-循环嵌套"><a aria-hidden="true" tabindex="-1" href="#each-循环嵌套"><span class="icon icon-link"></span></a>Each 循环(嵌套)</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="each-循环嵌套"><a aria-hidden="true" tabindex="-1" href="#each-循环嵌套"><span class="icon icon-link"></span></a>Each 循环(嵌套)</h3><div class="wrap-body">
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token property"><span class="token variable">$icons</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">"eye"</span><span class="token punctuation">:</span> <span class="token string">"\f112"</span><span class="token punctuation">,</span> <span class="token string">"start"</span><span class="token punctuation">:</span> <span class="token string">"\f12e"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$name</span>, <span class="token variable">$glyph</span> in <span class="token variable">$icons</span> </span><span class="token punctuation">{</span>
|
||||
@ -447,7 +447,7 @@
|
||||
</span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="while-循环"><a aria-hidden="true" tabindex="-1" href="#while-循环"><span class="icon icon-link"></span></a>While 循环</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="while-循环"><a aria-hidden="true" tabindex="-1" href="#while-循环"><span class="icon icon-link"></span></a>While 循环</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token keyword">@use</span> <span class="token string">"sass:math"</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line">
|
||||
@ -469,8 +469,8 @@
|
||||
</span><span class="code-line"> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12.36094</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="sass-其它功能"><a aria-hidden="true" tabindex="-1" href="#sass-其它功能"><span class="icon icon-link"></span></a>Sass 其它功能</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">
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="sass-其它功能"><a aria-hidden="true" tabindex="-1" href="#sass-其它功能"><span class="icon icon-link"></span></a>Sass 其它功能</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist 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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token keyword">@mixin</span> <span class="token function">avatar</span><span class="token punctuation">(</span><span class="token variable">$size</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$circle</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$size</span><span class="token punctuation">;</span>
|
||||
@ -500,25 +500,25 @@
|
||||
</span><span class="code-line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token selector">.<span class="token variable">#{$klass}</span> </span><span class="token punctuation">{</span> ... <span class="token punctuation">}</span> <span class="token comment">// Class</span>
|
||||
</span><span class="code-line"><span class="token function">call</span><span class="token punctuation">(</span><span class="token variable">$function-name</span><span class="token punctuation">)</span> <span class="token comment">// Functions</span>
|
||||
</span><span class="code-line">@media <span class="token variable">#{$tablet}</span>
|
||||
</span><span class="code-line"><span class="token property">font</span><span class="token punctuation">:</span> <span class="token variable">#{$size}</span>/<span class="token variable">#{$line-height}</span>
|
||||
</span><span class="code-line"><span class="token url">url</span><span class="token punctuation">(</span><span class="token string">"#{$background}.jpg"</span><span class="token punctuation">)</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">
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token property"><span class="token variable">$list</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>a b c<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token function">nth</span><span class="token punctuation">(</span><span class="token variable">$list</span><span class="token punctuation">,</span> 1<span class="token punctuation">)</span> <span class="token comment">// starts with 1</span>
|
||||
</span><span class="code-line"><span class="token function">length</span><span class="token punctuation">(</span><span class="token variable">$list</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$item</span> in <span class="token variable">$list</span> </span><span class="token punctuation">{</span> ... <span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="maps"><a aria-hidden="true" tabindex="-1" href="#maps"><span class="icon icon-link"></span></a>Maps</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="maps"><a aria-hidden="true" tabindex="-1" href="#maps"><span class="icon icon-link"></span></a>Maps</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token property"><span class="token variable">$map</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token property">key1</span><span class="token punctuation">:</span> value1<span class="token punctuation">,</span> <span class="token property">key2</span><span class="token punctuation">:</span> value2<span class="token punctuation">,</span> <span class="token property">key3</span><span class="token punctuation">:</span> value3<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token function">map-get</span><span class="token punctuation">(</span><span class="token variable">$map</span><span class="token punctuation">,</span> key1<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</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></div></div><div class="wrap h2body-not-exist"><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="https://sass-lang.com/documentation">Sass 官方文档</a> <em>(sass-lang.com)</em></li>
|
||||
<li><a href="https://www.sass.hk/docs/">Sass 中文文档</a> <em>(sass.hk)</em></li>
|
||||
@ -536,8 +536,6 @@ function anchorPoint() {
|
||||
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();
|
||||
@ -548,7 +546,6 @@ function updateAnchor(element) {
|
||||
tocanchor.classList.remove('is-active-link');
|
||||
});
|
||||
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
|
||||
console.log('anchor', anchor)
|
||||
if (anchor) {
|
||||
anchor.classList.add('is-active-link');
|
||||
}
|
||||
|
Reference in New Issue
Block a user