philsinatra/sketch-color-vars

A Sketch plugin that will export the fill color of selected layers to SCSS, LESS and CSS files.

Sketch Color Variables

A Sketch plugin that will export the fill color of selected layers to SCSS, LESS and CSS files.

Installation

Option 1

1. Download the plugin.
2. Double click "Color-Vars.sketchplugin" to install it.

Option 2

As of Sketch version 45, managing plugins can be done directly in the app. Read more from the official Sketch app blog. You can search for Sketch Color Vars from the plugin manager.

Option 3

Use Sketch Toolbox

How it works

1. Name the layers your preferred variable names.
2. Select the layers containing the colors you want exported.
3. Run the plugin via the Plugins menu, or via the keyboard shortcut shift + cmd + ,

You will be prompted where to save the variable files:

• _colors.scss
• _colors.less
• _colors.styl
• _colors.css

Limitations

1. Only solid fills will be exported, not gradients.
2. Only the first solid fill will be exported (in cases where multiple fills are applied to a single shape/element).

Example

// _color.scss
$red-D0011B: rgba(82%,0%,11%,1.00);
$green-417505: rgba(25%,46%,2%,1.00);
$blue-4990E2: rgba(29%,56%,89%,1.00);

// _color.less
@red-D0011B: rgba(82%,0%,11%,1.00);
@green-417505: rgba(25%,46%,2%,1.00);
@blue-4990E2: rgba(29%,56%,89%,1.00);

// _color.styl
red-D0011B = rgba(82%,0%,11%,1.00);
green-417505 = rgba(25%,46%,2%,1.00);
blue-4990E2 = rgba(29%,56%,89%,1.00);

/* _color.css */
:root {
  --red-D0011B: rgba(82%,0%,11%,1.00);
  --green-417505: rgba(25%,46%,2%,1.00);
  --blue-4990E2: rgba(29%,56%,89%,1.00);
}

What's next?

• Add select options dialog for user to spec which file type(s) should be exported.
• Add option for color value type (hex, rgb, rgba).

Feedback

Feedback and pull requests are welcome :)

sketch-color-vars's Issues

Support Sketch 45 plugin update system

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

Some Extra Features

Thanks so much for this wonderful plugin. I have tried both InVision DSM and Zeplin for exporting colors and naming them, but after changing a color I have to add and name it again in those platforms.

Here are some features that makes this plugin much better :

1. A dialogue before exporting for choosing style options (scss/less/css/styl)
2. Option to choose color code option (hex/rgba/...)
3. Getting color from a color symbol (if possible)

Add identifier to manifest.json

This plugin cannot automatically update in Sketch Plugin Manager because it is missing an identifier in the manifest.json file. See http://developer.sketchapp.com/introduction/plugin-bundles/ for more info.

Nothing is output

I selected several layers of rectangles filled with a single color. Tried exporting to a folder titled CSS on Google Drive, and to a folder on local Mac hard drive. Nothing is output. Running Mac Sierra, and Sketch 48.2. All I wanted was a .css file.

RGB values calculating incorrectly?

The plugin exports all RGB values as percentage. For example red (#ff0000) is expressed as

rgba(: rgba(100%,0%,0%,1.00);

I believe it should be something like: rgba(: rgba(255,0,0,1.00);

Plugin don't work for some users.

Running OSX 10.13.5 and Sketch 45. When selecting all layers and then clicking the plugin, nothing happens. See here: https://www.dropbox.com/s/yo6k08avkyoxkx3/colors.mov?dl=0