Recently, I started using SASS and I am very impressed with this tool. However, before diving in further, I have one question that I can't seem to find the answer to.
What is the best approach for managing a variable value across multiple style sheets in SASS?
For example, if I want to set a radius value to 5px...
/* coreValues.scss */
$radiusNormal: 5px;
Would it be recommended to declare all these variables in a main .scss
file and then import that file into each individual scss sheet like this:
/* featureA.scss */
@import 'coreValues';
.boxA {
-webkit-border-radius: $radiusNormal;
-moz-border-radius: $radiusNormal;
-ms-border-radius: $radiusNormal;
border-radius: $radiusNormal;
}
.
/* featureB.scss */
@import 'coreValues';
.footerContainer {
-webkit-border-radius: $radiusNormal;
-moz-border-radius: $radiusNormal;
-ms-border-radius: $radiusNormal;
border-radius: $radiusNormal;
}