Move component variables to their own file

[jimmynotjim]

@sebworks asked this morning if it was possible to include only what we needed from cf-core.less, cf-buttons.less, and cf-icons.less into the cf-expandables component. It's something I'd thought about before but never really saw a good solution due to Less having zero insight into what is actually being used on the page. As often happens I moved on to another task but the question kept mulling around in the back of my mind and then I realized, while we can't know what the final page will use, we do know what the component will use, so why not limit the @import to only importing those files?

One immediate issue is that all the variables are defined in the main component Less file. Moving those variables into their own file, would the component (or end user) to either import the entire package via the main component Less file or pick and choose which elements from the component to import.

Ex:
At this time I think we'll need to import all of cf-core

/**
 * Expandables main Less file
 */

/* Outside CF dependencies */
@import 'cf-core'; 
@import 'cf-buttons/src/vars/buttons';
@import 'cf-buttons/src/atoms/button';
@import 'cf-buttons/src/atoms/buttons-with-icons';
/ * .... */

/* Expandable variables */
@import 'vars/expandables';

/* Expandable elements */
@import 'organisms/expandable';
@import 'organisms/expandable-group';

Thoughts?

[anselmbradford]

Would this be solved by @import (reference)? What do you think @Scotchester, could this be closed?