title: Changing values of elements using SASS based on HTML classes
body: <p>Assume I have two html pages in the same website, as follows:</p>
  
  <p><em>This is the first page</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.theme1 {
    background-color: black;
    color: white;
  }
  
  h2 {
    color: green;
  }
  
  p.special {
    color: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="theme1"&gt;
    &lt;h1&gt;Header 1&lt;/h1&gt;
    &lt;h2&gt;Header 2&lt;/h2&gt;
    &lt;p&gt;Paragraph 1&lt;/p&gt;
    &lt;p class="special"&gt;Paragraph 2&lt;/p&gt;
    &lt;p&gt;Paragraph 3&lt;/p&gt;
    &lt;p&gt;Paragraph 4&lt;/p&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>And this is the second page</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.theme2 {
    background-color: darkgray;
    color: pink;
  }
  
  h2 {
    color: darkblue;
  }
  
  p.special {
    color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="theme2"&gt;
    &lt;h1&gt;Header 1&lt;/h1&gt;
    &lt;h2&gt;Header 2&lt;/h2&gt;
    &lt;p&gt;Paragraph 1&lt;/p&gt;
    &lt;p class="special"&gt;Paragraph 2&lt;/p&gt;
    &lt;p&gt;Paragraph 3&lt;/p&gt;
    &lt;p&gt;Paragraph 4&lt;/p&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you notice, the pages have exactly the same HTML, except for the fact that the first page has class <code>theme1</code> and the second page has class <code>theme2</code>. CSS is different in both (in reality, I will have different HTML structure, but similar CSS structure).</p>
  
  <p>I would like to create a <strong>.scss</strong> file, and use SASS to detect the class in <code>body</code>, and choose the right theme values based on the class. How do I do that? I thought of using functions, but I am not sure how to let SASS detect that the page has <code>theme1</code> or <code>theme2</code> in the <code>body</code> element.</p>
  
  <p>My idea was to do something like this in the <strong>.scss</strong> file:</p>
  
  <pre><code>$theme1: (
      body-bg-color: black,
      body-font-color: white,
      h2-font-color: green,
      p-special-font-color: orange
  );
  
  $theme2: (
      body-bg-color: darkgray,
      body-font-color: silver,
      h2-font-color: darkblue,
      p-special-font-color: yellow
  );
  
  @function getBackgroundColorForBody () {
  
      // DETECT THEME
      $theme-name = &lt;detected class of body&gt;; // This is not correct, just an idea
  
      $bg-color = map-get($theme-name 'body-bg-color');
      @return $bg-color;
  }
  
  body {
      background-color: @getBackgroundColorForBody();
  }
  </code></pre>
  
  <p>I am new to SASS, so I am not sure how I can do this. Apologies about the simple quesiton.</p>