SCSS organisation omit customisation

[jimblue]

Hi,

Actually it's impossible to modify the variables by doing this for exemple:

// Changing variables
$share-this-highlight-link: transparent;

// Import the lib
@import '../../../node_modules/share-this/style/scss/share-this.scss';

It's not working because changed variables will be reseted as you are importing default variables along the main style.

To change this, you just need to create a new file call _style.scss where you'll put only the style classes without import _vars.scss.

Then inside share-this.scss you can import everything:

@import "vars";
@import "mixins";
@import "style";

Also you should add !default to all your variables likes this:

$share-this-vertical-offset: -.25em !default;
$share-this-background: #333333 !default;
$share-this-foreground: #ffffff !default;
$share-this-highlight-link: rgba(#ffffff, .25) !default;
$share-this-border-radius: .25em !default;
$share-this-arrow-size: .5em !default;
$share-this-sharer-width: 2em !default;
$share-this-sharer-height: 2em !default;
$share-this-sharer-padding: .35em !default;
$share-this-border-distance: 4em !default;
$share-this-animation-length: .3s !default;
$share-this-small-devices-max: 575px !default;

This will not break naming for actuals users but it will offer the possibility to change the variables.

And that's great ! 😄

[MaxArt2501]

... I have no idea what I had in mind when I forgot !default. Probably because I actually used LESS at first and blatantly converted the stylesheet in SCSS later. Sorry about that.

Will fix it soon.

[jimblue]

Sure no worries, thank you !