CSS hatが1.1.0になってCompass用のSCSSの出力にも対応してた

CSS hatは以前の記事で紹介しましたが、
Photoshopでレイヤーに適用したレイヤースタイルを
CSSに書きだしてくれるプラグインです。

そのプラグインがいつの間にかバージョン1.1.0になって
出来ることも増えていたので、紹介しておきます。

出力の形式が増えた

以前まではCSSのみだったのですが、
Less、SCSS、SASS、Stylus、StylusCSSでの出力もされるようになりました。

SCSS、SASSはCompass、Stylus、StylusCSSはnibを利用することを
想定したコードを出力してくれます。

例えば、下のようなものをPhotoshopで作ると、

以下のようなSCSSを吐き出してくれます。


  // add these lines to the beginning of .scss file:
  @import "compass/css3/border-radius";
  @import "compass/css3/background-clip";
  @import "compass/css3/box-shadow";
  @import "compass/css3/images";

  .layer {
    width: 251px;
    height: 251px;
    border: 3px solid #ca9853; // stroke
    @include border-radius(4px); // border radius
    @include background-clip(); // prevents bg color from leaking outside the border
    background-color: #ffa932; // layer fill content
    @include box-shadow(34px 41px 6px #7a7a7a, inset 0 0 29px rgba(255,255,255,.25)); // drop shadow and inner glow
    @include background-image(linear-gradient(bottom right, rgba(74,48,13,.3) 0%, rgba(146,96,27,.3) 21.92%, rgba(228,158,62,.3) 42.65%, rgba(199,139,57,.3) 51.07%, rgba(250,230,202,.3) 99.22%, rgba(250,230,202,.3) 100%)); // gradient overlay
  }

実際に動作させるとこんな感じ

Demo