我找到了一个完全可以做到这一点的脚本(为图层生成 CSS 和 HTML,并提供以 % 值导出它们的选项),并将 Photoshop 的 web-dev 工作减少了一半。现在我很好奇是否有人遇到过/使用插件,或者可以向我指出像 Sketch 应用程序这样的原生功能。没有这样的东西让我过渡到 Sketch 真的很痛苦。或者是 Sketch 的新手,我只是错过了 Sketch 使用 CSS 和 HTML 的方式在意识形态上有所不同。
Sketch 应用程序中是否有“生成 CSS/HTML”功能或插件
平面设计
css
html
素描应用
插入
2022-01-10 01:48:51
2个回答
这可能不是您正在寻找的答案,但我发现它比将平庸的自动生成样式交给工程师更好。
选择性标记
我相信你已经发现了 Sketch 的上下文菜单 CSS 抓取器。您可以选择任意数量的对象,并且在剪贴板上获得 CSS 的速度比粘贴它的速度要快。
当然没有选择器,它实际上只是 CSS 注释。每个块都由前面的注释使用层的名称调用,如下所示:
/* Rectangle 1: */
background: #C7C1B5;
/* Rectangle 1 Copy: */
background: #F5E618;
/* Rectangle 1 Copy 2: */
background: #FFFFFF;
文件注释
Sketch Measure是一个插件,可以根据您的规格生成各种级别的注释。这里有一个演示视频。基本思想是注释重要的数字,让开发者自己编写代码。
超越注释
您也可以单独或组合尝试这些工具:
实验性 HTML 生成器
我从未使用过它,它显然处于开发的早期阶段,但是Blade 插件看起来很有前途。
Blade 是一个用于自动生成 HTML 的 Sketch 3 插件。它将为组生成标签 <div>,为文本生成标签 <p> 等。
请参阅以下链接 http://blog.mengto.com/the-best-hidden-features-in-sketch/
关注 Meng To 的博客,及时了解有趣的 Sketch 教程、提示甚至技巧。 http://blog.mengto.com/ https://designcode.io/
其它你可能感兴趣的问题