Separate box-shadow properties - css

Question

Is there a way to influence only separate box-shadow properties?
For instance I have these classes to set button size and button color
.btn {
background: gray;
font-size: 15px;
box-shadow: 0 2px 0 0 dark-gray;
}
.btn--primary {
background: blue;
box-shadow: 0 2px 0 0 dark-blue;
}
.btn--secondary {
background: red;
box-shadow: 0 2px 0 0 dark-red;
}
.btn--large {
font-size: 20px;
}
But now, I also want a larger box shadow on .btn--large
Problem is, I have multiple colored buttons, so I would need some sort of "box-shadow-y-size property"
How do you work around this problem? The only way I can think of right now is to do something like this...
.btn--large.btn--primary {
box-shadow: 0 4px 0 0 dark-blue;
}
.btn--large.btn--secondary {
box-shadow: 0 4px 0 0 dark-red;
}

Answer 1

There is sadly only one way to define a box-shadow, but in your case there might be a work-around. If you don't specify a colour for your box-shadow it will default to the colour of the color attribute. Perhaps this is something you can make use of.
For example, if you want to be able to have a differently coloured box-shadow while still retaining the original text color, one way you can achieve this by applying the box-shadow to a :before pseudo element instead of the element itself.
JSFiddle with pseudo element solution