├── Copy SCSS Colors.sketchplugin
    └── Contents
    │   └── Sketch
    │       ├── manifest.json
    │       └── script.cocoascript
├── OLD-Copy SCSS Colors.sketchplugin
└── README.md


/Copy SCSS Colors.sketchplugin/Contents/Sketch/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name" : "Copy SCSS Colors",
 3 |   "description" : "Copt SCSS color variable declarations to your clipboard from a selection of color shape objects",
 4 |   "author" : "iain eudailey",
 5 |   "identifier" : "com.example.sketch.53bfd550-238f-46b6-8b3b-8373105d6acc",
 6 |   "version" : "2.0",
 7 |   "homepage" : "http://github.com/graphical-iain/Copy-SCSS-Colors",
 8 |   "commands" : [
 9 |     {
10 |       "script" : "script.cocoascript",
11 |       "name" : "Copy SCSS Colors",
12 |       "shortcut": "cmd shift c",
13 |       "handlers" : {
14 |         "run" : "onRun"
15 |       },
16 |       "identifier" : "copy-colors"
17 |     }
18 |   ],
19 |   "menu" : {
20 |     "items" : [
21 |       "copy-colors"
22 |     ],
23 |     "title" : "Copy SCSS Colors"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/Copy SCSS Colors.sketchplugin/Contents/Sketch/script.cocoascript:
--------------------------------------------------------------------------------
 1 | var onRun = function(context) {
 2 | 	
 3 | 	var scssVars = "";
 4 | 
 5 | 	// store the pasteboard object
 6 | 	var clipboard = {
 7 | 		pasteBoard : null,
 8 | 		init : function() {
 9 | 			// save the pasteboard object
10 | 			this.pasteBoard = NSPasteboard.generalPasteboard();
11 | 		},
12 | 		set : function( text )	{
13 | 			// set the clipboard to the given text
14 | 			if( typeof text === 'undefined' ) return null;
15 | 	 
16 | 			if( !this.pasteBoard ) {
17 | 				this.init();
18 | 			}
19 | 	 
20 | 			this.pasteBoard.declareTypes_owner( [ NSPasteboardTypeString ], null );
21 | 			this.pasteBoard.setString_forType( text, NSPasteboardTypeString );
22 | 	 
23 | 			return true;
24 | 		}
25 | 	};
26 | 
27 | 
28 | 	//returns background color as scss varable delaration:
29 | 	// $c-["layer name"]: #["hex"];
30 | 	// ( eg. $c-red: #ff0000; )
31 | 	var getBackground = function getBackground(layer){
32 | 		
33 | 
34 | 		if ( layer.class() == MSShapeGroup && layer.style().fills().count() > 0 ) {
35 | 			var color = layer.style().fills().firstObject().color().immutableModelObject().hexValue().toLowerCase();
36 | 			var name = layer.name().toLowerCase().replace(" ", "-");
37 | 
38 | 			log(color);
39 | 			return "\n$c-" + name + ": #" + color + ";";
40 | 
41 | 		}	else {
42 | 			return "";
43 | 		}
44 | 	};
45 | 
46 | 
47 | 
48 | 	var selection = context.selection;
49 | 
50 | 	for ( var i=0; i<selection.count(); i++ ) {
51 | 		var layer = selection[i];
52 | 		if (layer.class() == MSLayerGroup){
53 | 			var subLayers = layer.children();
54 | 
55 | 			for (var j=0; j<subLayers.count(); j++) {
56 | 				scssVars += getBackground(subLayers.objectAtIndex(j));
57 | 			}
58 | 
59 | 		}
60 | 
61 | 		else {
62 | 			scssVars += getBackground(layer);
63 | 		}
64 | 	}
65 | 
66 | 
67 | 
68 | 	clipboard.set(scssVars + "\n");
69 | 
70 | 
71 | };
72 | 


--------------------------------------------------------------------------------
/OLD-Copy SCSS Colors.sketchplugin:
--------------------------------------------------------------------------------
 1 | // Sketch Plugin: Get SCSS Variables (cmd shift c)
 2 | // Source github.com/graphical-iain/Copy-SCSS-Colors
 3 | // Version 1.0
 4 | 
 5 | (function() {
 6 | 	
 7 | 	var scssVars = "";
 8 | 
 9 | 
10 | 	var clipboard = {
11 | 		// store the pasteboard object
12 | 		pasteBoard : null,
13 | 	 
14 | 		// save the pasteboard object
15 | 		init : function()
16 | 		{
17 | 			this.pasteBoard = NSPasteboard.generalPasteboard();
18 | 		},
19 | 		// set the clipboard to the given text
20 | 		set : function( text )
21 | 		{
22 | 			if( typeof text === 'undefined' ) return null;
23 | 	 
24 | 			if( !this.pasteBoard )
25 | 				this.init();
26 | 	 
27 | 			this.pasteBoard.declareTypes_owner( [ NSPasteboardTypeString ], null );
28 | 			this.pasteBoard.setString_forType( text, NSPasteboardTypeString );
29 | 	 
30 | 			return true;
31 | 		}
32 | 	};
33 | 
34 | 
35 | 	//returns background color as scss varable delaration:
36 | 	// $c-["layer name"]: #["hex"];
37 | 	// ( eg. $c-red: #ff0000; )
38 | 	var getBackground = function getBackground(layer){
39 | 		
40 | 
41 | 		if (layer.class() == MSShapeGroup)  {
42 | 
43 | 			var color = layer.style().fill().color().hexValue().toLowerCase();
44 | 			var name = layer.name().toLowerCase().replace(" ", "-");
45 | 
46 | 			return "\n$c-" + name + ": #" + color + ";";
47 | 
48 | 		}
49 | 		
50 | 		else {
51 | 			return "";
52 | 		}
53 | 
54 | 	}
55 | 
56 | 
57 | 	for ( var i=0; i<selection.count(); i++ ) {
58 | 		var layer = selection[i];
59 | 
60 | 		if (layer.class() == MSLayerGroup){
61 | 			var subLayers = layer.children();
62 | 
63 | 			for (var j=0; j<subLayers.count(); j++) {
64 | 				scssVars += getBackground(subLayers.objectAtIndex(j));
65 | 			}
66 | 
67 | 		}
68 | 
69 | 		else {
70 | 			scssVars += getBackground(layer);
71 | 		}
72 | 		
73 | 	}
74 | 
75 | 
76 | 	clipboard.set(scssVars + "\n");
77 | 
78 | })();
79 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Copy SCSS Colors
 2 | Sketch.app plugin for creating SCSS color variable declarations from a selection of color shape objects.
 3 | 
 4 | ## Installation
 5 | 1. Download and unzip the repository
 6 | 2. Double click `Copy SCSS Colors.sketchplugin` to open with Sketch and auto install the plugin
 7 |  
 8 | ## How to Use
 9 | Select `Plugins ▸ Copy SCSS Colors` in the Sketch menu bar or use the keyboard shortcut to copy the SCSS variable declarations to your clipboard.
10 | You can select a group of objects, multiple groups of objects, a single object, or multiple objects.
11 | 
12 | Colors will be copied to your clipboard in the following format:
13 | `$c-[Layer Name]: #[Hex Code];`
14 | 
15 | Eg., `$c-red: #a80e16;`
16 | 
17 |  
18 | **Keyboard Shortcut**  
19 | `Command` + `Shift` + `C`
20 | 


--------------------------------------------------------------------------------