Back to blog

Generate your style sheets more quickly with CSS Hat

What is CSS Hat ?

CSS Hat is a paid extension ($34.99) that allows you to produce your CSS much faster !

Here’s an example of its use in the HTML slicing of the main menu in red below :

Screenshot CSS Hat

  1. Select your layer (note, the layer must contain styles! If you use a merged layer, the plugin will not work)
  2. Open the dedicated CSS Hat window
  3. Click on the “Copy” button

CSS Hat allows

  • Generation in the following languages: classic CSS, LESS, SCSS (Compass), SASS, and Stylus
  • Browser prefix generation
  • Layer dimension generation
  • CSS class generation

Where to find it ?

To buy CSS Hat, visit the official plugin website: csshat.com.

CSS Hat will save you a lot of time during your slicing, especially for complex buttons or for gradient backgrounds, as in the example above.