[SalesForce] Expressions in the CSS file

I'm trying to enable users setting things in my app like colors, fonts, etc, as part of a customized profile they can maintain, and would like to change the elements dynamically as they provide input so they can see the changes in real time.

I can do this by binding the value of the input component to an attribute and then using that attribute in an expression in the style of the element, but this is going to get messy the more variables there are.

I'd rather just have a class on the element, and have the expression in the class CSS file, but it seems you cannot use expressions in CSS, only in the app or component markup.

Is there any way to get expression logic in the CSS file?

Here's a very simple component that shows what I'm trying do. NOTE: The color picker on Chrome on Mac updates the attribute in real time, and therefore updates the sample text area in real time also. Chrome on Mac is what all my users use. The Windows Chrome picker doesn't seem to update in real time, so if you take a look at this sample app on Windows, it may not work in real time the way it is for me.

App (test_CssExpression_App):

<aura:application >
    <c:test_CssExpression/>
</aura:application>

Component (test_CssExpression.cmp):

<aura:component>
    <aura:attribute name="backgroundColor" type="String" default="#FFFFFF"/>
    <aura:attribute name="textColor"       type="String" default="#000000"/>

    <lightning:input type="color"
                     label="Background Color"
                     name="backgroundColor"
                     value="{!v.backgroundColor}"/><br/><br/>

    <lightning:input type="color"
                     label="Text Color"
                     name="textColor"
                     value="{!v.textColor}"/><br/><br/>

    <div class="testDiv"
         style="{! 'background-color: ' + v.backgroundColor + '; color: ' + v.textColor + ';'}">
        This is some sample text
    </div>

</aura:component>

Style (test_CssExpression.css):

.THIS.testDiv {
    width: 200px;
    height: 200px;
    border: 2px solid black;
}

Here's what I'd like to do in the component (no style on the element, just class):

<aura:component>
    <aura:attribute name="backgroundColor" type="String" default="#FFFFFF"/>
    <aura:attribute name="textColor"       type="String" default="#000000"/>

    <lightning:input type="color"
                     label="Background Color"
                     name="backgroundColor"
                     value="{!v.backgroundColor}"/><br/><br/>

    <lightning:input type="color"
                     label="Text Color"
                     name="textColor"
                     value="{!v.textColor}"/><br/><br/>

    <div class="testDiv"
        This is some sample text
    </div>

</aura:component>

Here's what I'd like to do in the style (expression logic to set the colors in real time) but it's rejecting the use of expression logic in the CSS file:

.THIS.testDiv {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    background-color: {!v.backgroundColor};
    color: {!v.textColor};
}

Any ideas appreciated – thanks!