共计 1152 个字符，预计需要花费 3 分钟才能阅读完成。
咱们通过 React 和 Rax 开发了大量的前端利用。在开发 JSX 文件时，基于代码提醒和补全，代码片段，TypeScript 等形式很好的晋升了页面逻辑的开发效率。而咱们却常常疏忽了款式的开发效率，置信你在开发款式文件的过程中，肯定遇到了很多不不便的中央。
当初给大家举荐一款超好用的 VS Code 插件 Iceworks Style Helper，它可大大晋升外款式文件的开发效率。
全新的 CSS Class 开发体验
Iceworks Style Helper 买通了 JSX 和 CSS 的文件之间的分割，可更高效的预览，定位和应用款式属性。
预览和定位款式
只有将鼠标悬停至想要查看的款式上，便可预览已有的款式内容详情。再通过 Cmd (Windows Control) + 鼠标点击，疾速定位到款式实现地位，不便咱们疾速对属性进行批改。
应用款式
当咱们须要应用已有款式时，呈现的主动联想补全，不便咱们疾速选取须要应用的款式。
疾速生成 className
当咱们先写好 JSX 组件的构造，再开发款式文件时，提醒出 JSX 文件中已申明的款式 className，可疾速生成须要批改的款式构造。
全新的行内款式开发体验
在 JSX 文件中开发内联款式时会呈现款式属性的提醒和补全，岂但可预览并查看 CSS 相干文档，还能够疾速抉择举荐候选值。使 JSX 文件也具备了款式代码提醒举荐的能力。
全新的 SASS 开发体验
变量的应用始终困扰着泛滥 SASS 开发者。Iceworks Style Helper 通过深层的 SASS 文件剖析，彻底改善变量应用体验。
SASS 变量预览及定位
在 SASS 文件中鼠标悬停至想要查看的变量上时，便可预览变量值和理论色彩，同时通过 Cmd (Windows Control) + 鼠标点击可疾速跳转至变量定义的地位，对变量进行批改。彻底改善 SASS 变量的应用和开发体验。
SASS 变量应用
当咱们须要应用一个变量时，呈现联想的变量值同时可预览对应的变量值，保障变量应用的正确性。同时当咱们应用的值和已有变量的值雷同时，也会呈现对应变量的替换，更疾速的应用 SASS 变量。充沛应用定义 SASS 变量的同时，也大大降低了变量应用出错的概率。
What’s Next
咱们打算将反对更多的款式开发场景，比方 Less，CSS Modules 等，同时提供更智能的举荐和代码生成。咱们也会提供罕用款式计划封装，比方一键程度垂直居中等，以及可视化编辑款式计划，请大家纵情期待。
是时候降级和改善咱们的款式开发体验了，快来下载体验吧~
欢送退出 Iceworks 团队
Iceworks 我的项目着重改善前端工程开发体验，提供了一系列优良的 VS Code 插件。欢送感兴趣或者在应用过程中呈现问题的同学和咱们保持联系。
如果你也善于开发 VS Code 插件，欢送投递简历：
jason.yf@alibaba-inc.com
欢送退出钉钉群：
