存放重构代码相关的 snippets，目前支持：
- 常用的结构 snippets：应用于 HTML 文件
- 常用的样式 snippets：应用于 SCSS、Less、CSS 文件
- 上面的 2 转成 tailwindcss 类名的 snippets：应用于 TypeScript JSX、JavaScript JSX 文件。
注：为便于记忆及检索，所有命令的缩写（prefix）都以 / 字符开头
如果你想参与代码贡献，请参考贡献指引。
更新指引
在 VS code 的 Extensions 面板下搜索“fancy snippets”或直接前往插件市场下载
结构 snippets
一、按钮代码片段
详见活动模板按钮组件及（按钮形状的）链接组件规范 - 代码示例 或 规范图示（完整规范，请查见 Figma）。
btn
按钮=背景层（含字）+文字层（视觉上隐藏）
<button class="jf-button" type="button">
<!-- 其他状态（如禁用）替换此处图片 -->
<span class="jf-button__bg" style="
background-image: url(https://path/to/you/image.png);
"></span>
<!-- 将按钮图的文案写在这里，并添加jf-button__text--sr-only类在视觉上隐藏 -->
<span class="jf-button__text jf-button__text--sr-only">立即购买</span>
</button>
btn-text
按钮=背景层+文字层
<button class="jf-button" type="button">
<span class="jf-button__bg" style="
background-image: url(https://path/to/you/image.png);
"></span>
<span class="jf-button__text jf-button__text--ellipsis">按钮文案按钮文案按钮文案按钮文案按钮文案</span>
</button>
btn-link
按钮（样式为“链接”）=背景层+文字层
<button class="jf-button jf-button__variant-link" type="button">
<span class="jf-button__text" style="color: red">查看更多</span>
</button>
btn-disabled
按钮（禁用态）=背景层+文字层
<button class="jf-button jf-button--disabled" type="button">
<span class="jf-button__bg" style="
background-image: url(https://path/to/you/image.png);
"></span>
<span class="jf-button__text">未开始</span>
</button>
二、图标
icon
<span
class="jf-icon"
style="width: 16px;
height: 16px;
background-image: url(https://path/to/you/icon.png);">
</span>
样式 snippets
重置
reset-common：样式重置（默认）
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
font: ${1};
color: ${2};
reset-list：列表样式重置
list-style: none;
padding: 0;
margin: 0;
隐藏
sr-only：视觉上隐藏，对可访问设备（如读屏软件）友好
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect (0,0,0,0);
white-space: nowrap;
-webkit-clip-path: inset (50%);
clip-path: inset (50%);
border: 0;
文本
text-els：CSS超长...截断（单行）
max-width: ${1:4em};
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-lc：CSS超长...截断（多行）
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: $1;
-webkit-box-orient: vertical;
text-default：设置文字样式三要素(颜色字号行高)
特别注意行高属性：
- 记得声明行高，特别是存在可能折行的情况
- 尽可能使用不带单位的值
color: ${1:red};
font-size: ${2:1em};
line-height: ${3:1.2};
text-gradient：纯色文字配合mask模拟渐变效果
影响渐变效果的因素包括：
- DOM元素的
display 属性值，这决定了渐变效果的起止范围
linear-gradient 的角度和起止点颜色的透明度
color: ${1:red};
mask: linear-gradient(${2:-90deg}, rgba(0, 0, 0, ${3:.6}), rgba(0, 0, 0, ${4:1}));
可交互元素
interactive-area：扩大交互元素（如按钮、链接）的点击热区
设置合理的可点击热区大小(结合原理，根据实际情况调整)，提升用户体验
&::after {
position: absolute;
content: '';
left: -0.5em;
top: -0.5em;
right: -0.5em;
bottom: -0.5em;
}
布局元素
layout-full-screen：绝对定位铺满视窗
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
layout-flex-center：块级Flex盒子垂直水平居中
display: flex;
justify-content: center;
align-items: center;
layout-abs-center：绝对定位「垂直水平」居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
layout-abs-center-x：绝对定位盒子「水平」居中
position: absolute;
left: 50%;
transform: translateX(-50%);
layout-abs-center-y：绝对定位盒子「垂直」居中
position: absolute;
top: 50%;
transform: translateY(-50%);
layout-set-wh：定义宽高
width: ${1};
height: ${2};
图像
image-img-contain：<img /> 默认样式
width: ${1};
height: ${2};
object-fit: contain;
image-bg-full：background-image 默认样式
width: ${1};
height: ${2};
background-image: url(${3});
background-size: 100% 100%;
background-repeat: no-repeat;
列表
list-li1：匹配只有1个列表项的情况
注：根据实际情况，可将 <li> 替换为其他标签（如 <div>）
// 只有1个元素(第1个元素也是倒数第1个元素，匹配只有1个li的情况)
li:first-child:last-child {
// 在这里定义匹配到的li的样式
}
list-lin：匹配只有N（n>2）个列表项的情况
注：根据实际情况，可将 <li> 替换为其他标签（如<div>等）
// 有N个元素(第1个元素也是倒数第N个元素，匹配只有N个li的情况)
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
// 在这里定义匹配到的li的样式
}
滚动条
详见 TDesign
