Inheriting Styles

In the following example, any button descendent of intro, card, and modal will inherit the property set on their parent selectors.

.intro {
  --btn-font-size: 1.1em;
  --btn-bg: #b13c69;
}

.card {
  --btn-font-size: 0.85em;
  --btn-bg: #60a4b3;
}

.modal {
  --btn-font-size: 1em;
  --btn-bg: #e85838;
  display: none;
}

.btn {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.75em 1.5em;
  border-radius: 0.35em;

  font-size: var(--btn-font-size);
  background-color: var(--btn-bg);
}

Using CSS Variables with SVGs

You can use CSS variables to modify both style and presentational attributes inside inline SVGs.

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <symbol id="heart" viewBox="0 0 113.8 96.2" stroke="var(--main-fill-color)" stroke-width="2">
    <path fill="var(--sec-fill-color)" d="M96 0L67.5 5.2 56.9 23.3v72.8l56.9-55.6z"></path>
    <path fill="var(--main-fill-color)" d="M46.4 5.3L17.9.1 0 40.6l56.9 55.6.1-72.8z"></path>
  </symbol>
</svg>
<div class="main">
  <!-- Red -->
  <svg width="160" height="160" class="heart-red">
    <use xlink:href="#heart"></use>
  </svg>

  <!-- Green -->
  <svg width="140" height="140" class="heart-green">
    <use xlink:href="#heart"></use>
  </svg>

  <!-- Blue -->
  <svg width="120" height="120" class="heart-blue">
    <use xlink:href="#heart"></use>
  </svg>
</div>

CSS

.heart-red {
  --main-fill-color: #c44;
  --sec-fill-color: #d35f5f;
}
.heart-green {
  --main-fill-color: #41af5d;
  --sec-fill-color: #5ece7f;
}
.heart-blue {
  --main-fill-color: #2e97af;
  --sec-fill-color: #38acd0;
}