mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 05:01:21 +08:00
564 lines
83 KiB
HTML
564 lines
83 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-color-mode="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Sass
|
|
& sass cheatsheet & Quick Reference</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta description="这是一份快速参考备忘单，列出了 SASS 最有用的功能。为开发人员分享快速参考备忘单。">
|
|
<meta keywords="Quick,Reference,cheatsheet,sass">
|
|
<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">
|
|
<link rel="stylesheet" href="../style/katex.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/sass.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 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" data-num="2" href="#sass-基础">Sass 基础</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#变量">变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#字符串插值">字符串插值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#注释">注释</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#extend">Extend</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#嵌套nesting">嵌套(Nesting)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#模块片段">模块（片段）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#混合mixins">混合(Mixins)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#import">@import</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#sass-混合mixins">Sass 混合(Mixins)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#参数">参数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#默认值">默认值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#默认变量">默认变量</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#sass-颜色函数">Sass 颜色函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#rgba">rgba</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#mixing">Mixing</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#修改-hsla">修改 HSLA</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#获取值">获取值</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#hsla">HSLA</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#rgb">RGB</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#sass-内置了对颜色值的支持">Sass 内置了对颜色值的支持</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#调整">调整</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#sass-其他函数">Sass 其他函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#字符串">字符串</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#numbers">Numbers</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#units">Units</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#units-1">Units</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#misc">Misc</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#sass-功能检查">Sass 功能检查</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#功能检查">功能检查</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#功能">功能</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#sass-循环">Sass 循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#for-循环">For 循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#each-循环简单">Each 循环（简单）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#each-循环嵌套">Each 循环（嵌套）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#while-循环">While 循环</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#sass-其它功能">Sass 其它功能</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#条件句">条件句</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#插值">插值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表">列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#maps">Maps</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" 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>
|
|
<li><a href="https://www.sass.hk/docs/">Sass 中文文档</a> <em>(sass.hk)</em></li>
|
|
</ul>
|
|
<p>Sass 是一种 CSS 的预编译语言</p>
|
|
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> sass
|
|
</span></code></pre>
|
|
<p>在 Node.js 环境中使用 Sass</p>
|
|
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ sass source/index.scss build/index.css
|
|
</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 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 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 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"> 块注释
|
|
</span></span><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">// 这是一条单行注释</span>
|
|
</span></code></pre>
|
|
</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>
|
|
</span><span class="code-line"><span class="token selector">.push-button </span><span class="token punctuation">{</span>
|
|
</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 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>
|
|
</span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token punctuation">}</span>
|
|
</span><span class="code-line"> <span class="token selector">li </span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <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">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</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>编译 css 为：</p>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token selector">nav ul </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line"><span class="token selector">nav li </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line"><span class="token selector">nav a </span><span class="token punctuation">{</span>
|
|
</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 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>
|
|
</span><span class="code-line"><span class="token property"><span class="token variable">$primary-color</span></span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
|
|
</span></code></pre>
|
|
<p>注意以下划线开头的 Sass 文件</p>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token comment">// styles.scss</span>
|
|
</span><span class="code-line"><span class="token keyword">@use</span> <span class="token string">'base'</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"><span class="token selector">.inverse </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> base.<span class="token variable">$primary-color</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</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"><span class="token class">.inverse</span></span> <span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#333</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 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 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>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line"><span class="token selector">h1 </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token keyword">@include</span> heading-font<span class="token punctuation">;</span>
|
|
</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 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>
|
|
</span><span class="code-line"><span class="token keyword">@import</span> <span class="token string">"theme.css"</span><span class="token punctuation">;</span>
|
|
</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 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>
|
|
</span></code></pre>
|
|
<hr>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token selector">body </span><span class="token punctuation">{</span>
|
|
</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 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>
|
|
</span></code></pre>
|
|
<hr>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token selector">body </span><span class="token punctuation">{</span>
|
|
</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 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>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line"><span class="token selector">body </span><span class="token punctuation">{</span>
|
|
</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 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 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 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 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>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">saturate</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">desaturate</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">grayscale</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span>
|
|
</span></code></pre>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">adjust-hue</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> 15deg<span class="token punctuation">)</span>
|
|
</span><span class="code-line"><span class="token function">complement</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token comment">// like adjust-hue(_, 180deg)</span>
|
|
</span><span class="code-line"><span class="token function">invert</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span>
|
|
</span></code></pre>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">fade-in</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 opacify()</span>
|
|
</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 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-->
|
|
<h4 id="hsla"><a aria-hidden="true" tabindex="-1" href="#hsla"><span class="icon icon-link"></span></a>HSLA</h4>
|
|
<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>
|
|
<h4 id="rgb"><a aria-hidden="true" tabindex="-1" href="#rgb"><span class="icon icon-link"></span></a>RGB</h4>
|
|
<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>
|
|
</span></code></pre>
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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 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 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>
|
|
</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">$alpha</span></span><span class="token punctuation">:</span> -0.4<span class="token punctuation">)</span> <span class="token comment">// fade-out(_, .4)</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">$hue</span></span><span class="token punctuation">:</span> 30deg<span class="token punctuation">)</span> <span class="token comment">// adjust-hue(_, 15deg)</span>
|
|
</span><span class="code-line"><span class="token comment">// 通过百分比变化</span>
|
|
</span><span class="code-line"><span class="token function">scale-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> 50%<span class="token punctuation">)</span>
|
|
</span><span class="code-line"><span class="token comment">// 完全改变一个属性</span>
|
|
</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">$hue</span></span><span class="token punctuation">:</span> 180deg<span class="token punctuation">)</span>
|
|
</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 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>
|
|
</span></code></pre>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">to-upper-case</span><span class="token punctuation">(</span>hello<span class="token punctuation">)</span>
|
|
</span><span class="code-line"><span class="token function">to-lower-case</span><span class="token punctuation">(</span>hello<span class="token punctuation">)</span>
|
|
</span></code></pre>
|
|
<hr>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">str-length</span><span class="token punctuation">(</span>hello world<span class="token punctuation">)</span>
|
|
</span><span class="code-line"><span class="token comment">// "ello" - 它是从 1 开始的，而不是从 0 开始的</span>
|
|
</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 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>
|
|
</span><span class="code-line"><span class="token function">round</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">abs</span><span class="token punctuation">(</span>-10px<span class="token punctuation">)</span> <span class="token comment">// 10px</span>
|
|
</span></code></pre>
|
|
<hr>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">min</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 4px<span class="token punctuation">)</span> <span class="token comment">// 1px</span>
|
|
</span><span class="code-line"><span class="token property"><span class="token variable">$widths</span></span><span class="token punctuation">:</span> 50px<span class="token punctuation">,</span> 30px<span class="token punctuation">,</span> 100px
|
|
</span><span class="code-line"><span class="token keyword">@debug</span> math.<span class="token function">min</span><span class="token punctuation">(</span><span class="token variable">$widths</span>...<span class="token punctuation">)</span> <span class="token comment">// 30px</span>
|
|
</span></code></pre>
|
|
<hr>
|
|
<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 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 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 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>
|
|
</span><span class="code-line"><span class="token function">mixin-exists</span><span class="token punctuation">(</span>red-text<span class="token punctuation">)</span>
|
|
</span><span class="code-line"><span class="token function">function-exists</span><span class="token punctuation">(</span>redify<span class="token punctuation">)</span>
|
|
</span></code></pre>
|
|
<hr>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token function">global-variable-exists</span><span class="token punctuation">(</span>red<span class="token punctuation">)</span>
|
|
</span></code></pre>
|
|
<hr>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token comment">// .menu li a</span>
|
|
</span><span class="code-line"><span class="token function">selector-append</span><span class="token punctuation">(</span><span class="token string">'.menu'</span><span class="token punctuation">,</span> <span class="token string">'li'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">)</span>
|
|
</span><span class="code-line"><span class="token comment">// .menu:hover li</span>
|
|
</span><span class="code-line"><span class="token function">selector-nest</span><span class="token punctuation">(</span><span class="token string">'.menu'</span><span class="token punctuation">,</span> <span class="token string">'&:hover li'</span><span class="token punctuation">)</span>
|
|
</span><span class="code-line"><span class="token function">selector-extend</span><span class="token punctuation">(</span>...<span class="token punctuation">)</span>
|
|
</span><span class="code-line"><span class="token function">selector-parse</span><span class="token punctuation">(</span>...<span class="token punctuation">)</span>
|
|
</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 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 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>
|
|
<hr>
|
|
<pre class="language-scss"><code class="language-scss code-highlight"><span class="code-line"><span class="token keyword">@mixin</span> <span class="token selector">debug-content-exists </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token keyword">@debug</span> meta.<span class="token function">content-exists</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token keyword">@content</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"><span class="token keyword">@include</span> debug-content-exists<span class="token punctuation">;</span> <span class="token comment">// false</span>
|
|
</span><span class="code-line"><span class="token keyword">@include</span> <span class="token selector">debug-content-exists </span><span class="token punctuation">{</span> <span class="token comment">// true</span>
|
|
</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 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">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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 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>
|
|
</span><span class="code-line"> <span class="token property">ul</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>3n <span class="token operator">+</span> <span class="token variable">#{$i}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">lighten</span><span class="token punctuation">(</span><span class="token variable">$base-color</span><span class="token punctuation">,</span> <span class="token variable">$i</span> <span class="token operator">*</span> 5%<span class="token punctuation">)</span><span class="token punctuation">;</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>编译 css 为：</p>
|
|
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">ul<span class="token pseudo-class">:nth-child</span><span class="token punctuation">(</span><span class="token n-th"><span class="token number">3n</span> <span class="token operator">+</span> <span class="token number">1</span></span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#004080</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"><span class="token selector">ul<span class="token pseudo-class">:nth-child</span><span class="token punctuation">(</span><span class="token n-th"><span class="token number">3n</span> <span class="token operator">+</span> <span class="token number">2</span></span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#004d99</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"><span class="token selector">ul<span class="token pseudo-class">:nth-child</span><span class="token punctuation">(</span><span class="token n-th"><span class="token number">3n</span> <span class="token operator">+</span> <span class="token number">3</span></span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
|
</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 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>
|
|
</span><span class="code-line"> <span class="token selector">.icon-<span class="token variable">#{$size}</span> </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">$size</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token variable">$size</span><span class="token punctuation">;</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>编译 css 为：</p>
|
|
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.icon-40px</span></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 number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"><span class="token selector"><span class="token class">.icon-50px</span></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 number">50</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
|
</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 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>
|
|
</span><span class="code-line"> <span class="token selector">.icon-<span class="token variable">#{$name}</span>:before </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Icon Font"</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token variable">$glyph</span><span class="token punctuation">;</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>编译 css 为：</p>
|
|
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.icon-eye</span><span class="token pseudo-element">:before</span></span> <span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Icon Font"</span><span class="token punctuation">;</span>
|
|
</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><span class="code-line"><span class="token selector"><span class="token class">.icon-start</span><span class="token pseudo-element">:before</span></span> <span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Icon Font"</span><span class="token punctuation">;</span>
|
|
</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 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">
|
|
</span><span class="code-line"><span class="token comment">/// 将 `$value` 除以 `$ratio` 直到它低于 `$base`</span>
|
|
</span><span class="code-line"><span class="token keyword">@function</span> <span class="token function">scale-below</span><span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$base</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$ratio</span></span><span class="token punctuation">:</span> 1.618<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token keyword">@while</span> <span class="token selector"><span class="token variable">$value</span> > <span class="token variable">$base</span> </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property"><span class="token variable">$value</span></span><span class="token punctuation">:</span> math.<span class="token function">div</span><span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$ratio</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token punctuation">}</span>
|
|
</span><span class="code-line"> <span class="token keyword">@return</span> <span class="token variable">$value</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"><span class="token property"><span class="token variable">$normal-font-size</span></span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token selector">sup </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 function">scale-below</span><span class="token punctuation">(</span>20px<span class="token punctuation">,</span> 16px<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</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">sup</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 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 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>
|
|
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token variable">$size</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"> <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$circle</span> </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token variable">$size</span> <span class="token operator">/</span> 2<span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token punctuation">}</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"><span class="token selector">.square-av </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token keyword">@include</span> <span class="token function">avatar</span><span class="token punctuation">(</span>100px<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 punctuation">}</span>
|
|
</span><span class="code-line"><span class="token selector">.circle-av </span><span class="token punctuation">{</span>
|
|
</span><span class="code-line"> <span class="token keyword">@include</span> <span class="token function">avatar</span><span class="token punctuation">(</span>100px<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">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</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"><span class="token class">.square-av</span></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 number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"><span class="token punctuation">}</span>
|
|
</span><span class="code-line">
|
|
</span><span class="code-line"><span class="token selector"><span class="token class">.circle-av</span></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 number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
|
</span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
|
</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 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 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 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 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>
|
|
</ul>
|
|
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang.</footer></footer><script>
|
|
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
|
window.onhashchange = function () {
|
|
anchorPoint()
|
|
updateAnchor()
|
|
};
|
|
}
|
|
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');
|
|
}
|
|
}
|
|
anchorPoint();
|
|
|
|
function updateAnchor(element) {
|
|
const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
|
anchorContainer.forEach((tocanchor) => {
|
|
tocanchor.classList.remove('is-active-link');
|
|
});
|
|
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
|
|
if (anchor) {
|
|
anchor.classList.add('is-active-link');
|
|
}
|
|
}
|
|
// toc 定位
|
|
updateAnchor()
|
|
const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
|
anchor.forEach((item) => {
|
|
item.addEventListener('click', (e) => {
|
|
updateAnchor()
|
|
})
|
|
})
|
|
</script></body>
|
|
</html>
|