Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>fancy snippetsNew to Visual Studio Code? Get it now.
fancy snippets

fancy snippets

jt.chen

|
13 installs
| (0) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

存放重构代码相关的 snippets,目前支持:

  1. 常用的结构 snippets:应用于 HTML 文件
  2. 常用的样式 snippets:应用于 SCSS、Less、CSS 文件
  3. 上面的 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的样式  
  }

滚动条

scrollbar

详见 TDesign

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft