Sketch Color Vars

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

v1.3.3 is compatible with Sketch 0.0.0

GitHub tag license

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

Sketch Toolbox window showing Sketch Color Vars plugin

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 :)


Join the discussion

Download v1.3.3
Usage Activity
400100

No Sketchpacks Relay integration found

Stats
  • 137 downloads all–time
  • 1 downloads this week
  • 7 downloads this month
About this plugin

philsinatra published this plugin 2y ago.

v1.3.3 is the latest version.

Native updates are supported within Sketch.app.