>

How can I export Sketch layer styles as CSS code?

  1. Open you Sketch design, select a layer and go to navigation menu: Edit/Copy and select Copy CSS Attributes.
  2. The CSS code will be copied to your clipboard so you can paste it in your style sheet.

NOTE: Sketch CSS export doesn't generate Less, Sass, SCSS, Stylus pre-processors. But there is a way how to do it with Avocode - see below.


Would you like to update this article? Please contact us at team@avocode.com

Get 3 pro-tips to export image assets faster

Do you want to export image assets from design files without design tools? Or turn layer styles to code just by clicking? We put together 3 tips to speed up your work.

 

By subscribing, you agree to receive emails about Avocode content, updates and offers. You can unsubscribe any time.

Learn more

Need to extract CSS code without Sketch? Try Avocode

No need to buy or install Sketch. Open and export assets from layered Sketch designs on macOS, Windows, Linux or in the browser with Avocode.

Open your design and go to the Select Tool or hold V key. Then switch to the Code panel and make sure your code language is set to CSS (default for Web projects).

When you click on any design layer, its styles will appear as CSS in the Code panel. Either click COPY ALL to export the whole code snippet or select particular lines or values and they will be copied to your clipboard.

To customize the code output, feel free define any value as a Variable, use Replacement rules to replace any part of the generated code. You can even reorder or hide specific code properties, change quote type and much more in Code settings.

Export CSS code from a Sketch without Sketch

And what else is Avocode good for?

  • Turn layer styles into various web or mobile code languages and invite others to collaborate on your design and development projects.
  • Create variables and replacement rules for any code output and sync it accross your designs within one project.
  • Export layers as a JPEG, PNG, WebP, SVG.
  • Measure sizes and distances in px, pt, dp, and rem.
  • Handpick colors in HEX, HEX8, RGBa, HSLa, and UIColor code formats.
  • 14-day free trial, no credit card required, cancel anytime.

Get started with Avocode

Start with 14-day free trial. No credit card required.