psd 自动css_使用CSS Hat将PSD更快地转换为CSS

将Photoshop图层切片为Web元素确实很累。 而且，如果您打算将所有这些Photoshop图层效果转换为CSS ，可能会变得更加乏味。 “我应该使用哪些CSS属性来复制这些效果？” 和“要包括的供应商前缀？” 在此过程中，您可能会想到一些问题。

最近，我们遇到了一个名为CSS Hat的工具。 这是一个Photoshop插件，可将图层效果转换为CSS3 。 让我们看看它是如何工作的。

特点

如前所述，CSS Hat只需单击几下即可将您的Photoshop效果（例如“渐变叠加”，“阴影”和“内/外发光”）转换为标准CSS语法。

CSS Hat还支持转换为CSS预处理程序语法，例如Sass ，SCSS， LESS和Stylus 。

但是要注意的一件事是，LESS代码的生成输出使用了CSS Hat的同级LESSHat mixins库。 因此，为确保您可以使用输出，请下载该库，并将此行包括在LESS样式表的顶部。

@import "lesshat.less";

CSS Hat使用Compass为SCSS或Sass生成CSS3 mixin。

输出选项

包含几个选项，可以自定义输出。 您可以在从图层效果生成的样式中添加注释，包括供应商前缀，将图层尺寸转换为width和height属性，并将样式规则包装在类选择器中。

与之前介绍的CSS3P不同， CSS3P在云上生成代码输出，而另一方面，CSS Hat在计算机中本地运行该过程。 要了解此插件如何运作的更多信息，请观看以下视频。

结论

优质的产品很少免费提供。 目前CSS Hat的价格为29.99美元 。 此外，CSS Hat可以在Windows和Mac上运行，但是您需要Photoshop CS4及更高版本才能使用此插件。 如果您仍在CS3上运行，也许是时候进行升级了。

翻译自: https://www.hongkiat.com/blog/psd-to-css-with-csshat/