styling Out Of The Box (OOTB) for Lithium

VarunGrazitti  Thanks for the reply. But i am wondering where can i find the CSS of OOTB components to override the existing styling with my custom styling? I am finding many fields related to CSS in _variables.scss (res/skins/sass folder) when i created the custom skin. how to identify which field is being used for which component?

for example: following are defined in _variable.scss and i know that by overriding these fields, custom values will be prioritized over the default values. But how to know what are all fields is being used for which OOTB?

//$btn-font-weight: bold;
//$btn-primary-color: $li-text-color-inverse;
$btn-primary-bg: #ff0000;
$btn-primary-border: #ff0000;
$btn-inverse-primary-color: #ff0000;
//$btn-inverse-primary-bg: transparent;
//$btn-inverse-primary-border: $brand-primary;
//$btn-default-bg: $gray-lighter;
//$btn-default-border: $gray-lighter;
//$btn-secondary-color: $li-text-color-inverse;
//$btn-secondary-bg: $gray-light;
//$btn-secondary-border: $gray-light;
//$btn-inverse-secondary-color: $gray-dark;
//$btn-inverse-secondary-bg: transparent;
//$btn-inverse-secondary-border: $li-border-dark;
//$btn-link-disabled-color: $gray-lighter;
//$btn-sm-font-weight: normal;