title: Javascript nested within CSS
body: <p>I have an idea, and I'm not entirely sure that the interpreter is incapable of handling this already, yet I am sure it does not. Therefore, my question is, does the interpreter already handle the idea I am about to propose.</p>
  
  <p>Esentially, what I would like to do, is nest a block of Javascript into various locations of a stylesheet. The Javascript block should be able to access the scope of the CSS block which it is nested within. Maybe a sample code block would make this a little more clear.</p>
  
  <pre><code>.page {
      &lt;script&gt;
          target.header = document.createElement('div');
          target.header.className = 'pageHeader';
          target.header.heightPerc = 0.2;
          target.header.widthPerc = 1;
          target.header.height = target.clientHeight * target.header.heightPerc;
          target.header.width = target.clientWidth * target.header.widthPerc;
          target.header.style.height = (target.clientHeight * target.header.height) + 'px';
          target.header.style.width = (target.clientWidth * target.header.width) + 'px';
          target.header.style.borderBottom = '1px solid black';
          target.header.style.position = 'absolute';
          target.header.style.top = '0px';
          target.header.style.left = ((target.clientWidth - target.header.width) / 2) + 'px';
          target.appendChild('target.header');
      &lt;/script&gt;
  }
  </code></pre>
  
  <p><strong>In my example, the <code>target</code> is meant to be the current element held by the CSS selector</strong></p>
  
  <p>As you can see, this is a CSS class selector with a block of Javascript inside of it, which of course, does not work. The theory is that this block of Javascript acts as a template for each element captured by the CSS selector (similarly to angular.js, yet compiled at the same time as the CSS). Is there a way that something like this could be done already (without the use o third-party libraries or frameworks)?.</p>
  
  <p>Another use that I would want this for would be something like this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img class="image1" &gt;&lt;/img&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.image1{
      &lt;script&gt;
          target.src = "(URL for image)";
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>If there is any current way to do any of these things, please let me know!</p>