CSS: Any way to use variables or constants?

Discussion in 'HTML' started by Curtis, Jan 5, 2006.

  1. Curtis

    Curtis Guest

    CSS: Any way to use variables or constants?

    I'm still on the uphill part of the CSS learning curve, but
    in designing template/theme/skins for a couple of CMSs, I
    keep wishing that CSS were a programming language instead of
    a markup/style language. Perhaps there are techniques of
    which I'm unaware. If so, someone please clue me in.

    What I'd like to see goes something like this:

    At the top of a CSS file, one would declare a few of "master
    colors" (for example) as constants. For example, in my
    header, sidebar, and footer I use the same color of blue as
    a background color.

    So, as in PHP, we might declare a global

    $master_color = thevalue;

    then at

    background-color: $master_color;


    background-color: $master_color;


    Moreover, one might call functions to process $master_color
    mathematically to obtain color-complementary or harmonious
    shades with functions for font colors, etc., like so:

    ..left_sidebar .title
    background-color: title($master_color);

    where title($parm) would be a function that proportionally
    subtracts from R, G, and B to get a darker form of
    $master_color, which might be used a dozen places on a
    stylesheet--headlines, table-borders. Similarly, one might
    get lighter and darker alternating colors of table rows,

    The upshot is, one could do a blue-themed template and
    change it to (say) a gray or burnt-orange or purple by
    simply changing a couple of constants.

    This raises two questions:

    1. Are there existing CSS techniques whch would allow
    something like this, at least in part? (I'm aware of some
    ability to use percentages for some aspects of certain

    2. If not, is it theoretically possible to generate CSS
    sheets with PHP, which would allow the declaration and use
    of constants and functions?



    Visit We the Thinking
    An online magazine/forum
    devoted to philosophical
    Curtis, Jan 5, 2006
    1. Advertisements

  2. Curtis

    Mark Parnell Guest

    Deciding to do something for the good of humanity, Curtis
    You can specify multiple things at once, e.g.

    ..header, .left_sidebar
    background-color: #059FBA;
    Absolutely, as long as it sends the correct mime type (text/css). E.g.

    header("Content-Type: text/css");
    $masterColour = "#F830C2";

    * {background-color: <?php print($masterColour); ?>;}

    Mark Parnell, Jan 5, 2006
    1. Advertisements

  3. Curtis

    Curtis Guest

    Sure, I've been doing a bit of that. Might be handy to move
    the "globals" to the top as a section, then alphabetize all
    the selectors (including the expanded versions of .header,
    etc.) below.

    In the markup language we're writing, we've created a macro
    feature--creating styles for the page elements is one of the
    things it currently does, using reserved class words. It
    should not be too difficult (time-consuming, perhaps) to
    pass some selected PHP features through to allow computed
    variables such as the color thing I was describing--assuming
    we're not suffering from a case of featuritis.

    But the notion of 'computed CSS sheets' wholesale for
    theme/template/skins has a certain appeal. Anyone know of
    who might be doing this already, as opposed to using PHP to
    gen the HTML page which in turn calls an ordinary CSS?

    Perhaps some "engine" or "framework" I'm not aware of?



    Visit We the Thinking
    An online magazine/forum
    devoted to philosophical
    Curtis, Jan 5, 2006
  4. Curtis

    Toby Inkster Guest

    I used to a while ago. (Though I used CGI/Perl, not PHP.) There's nothing
    difficult about it. Just set the right MIME type and you're away.
    Toby Inkster, Jan 5, 2006
  5. Curtis

    Greg N. Guest

    Under PHP, I found it makes little sense to call external style sheets.
    Rather, I use inline style sheets which are generated through PHP
    along with the rest of the page.
    Greg N., Jan 5, 2006
  6. Doing that penalizes the visitor, who has to download the same styles
    with each page. Why not conserve the bandwidth and have your PHP just
    generate the <meta ...> line to include the css file? Downloaded once,
    and cached.
    Beauregard T. Shagnasty, Jan 5, 2006
  7. Curtis

    Greg N. Guest

    "penalize", bull. A style sheet is, what? 1k bytes or so. Even with a
    lousy 50kbit tlelphone line, that's less than 1/5th of a second. It
    probably takes the UA the same time to process another file request,
    even if that request is served from some cache.
    Greg N., Jan 5, 2006
  8. Curtis

    Curtis Guest

    Thanks to all for the feedback on these questions. Most



    Visit We the Thinking
    An online magazine/forum
    devoted to philosophical
    Curtis, Jan 5, 2006
  9. Bull? Is it not true that the styles download for each page? Oh, you
    don't think that's a penalty.
    Maybe yours is just 1kb. I tend to put all of the styles in the external
    style sheet, unlike yours with all the inline styles in addition to the
    <style..> block. From the site in your sig:

    <div class=content>
    <div style="height:120px; width:95%">
    <div class="columns"
    style="height:250px; margin-left: auto; margin-right: auto;">


    <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <span style="background: #ddbb66; font-family:serif; font-size: 10pt;
    <span style="background: #cccccc;">W3C</span>
    <span style="font-size: 8pt;">css</span>

    Mine are also quite a bit more complicated than yours.
    Ok then, let's talk about server processor time spent generating it for
    every page. One <meta> line in the template would save all of that.
    Beauregard T. Shagnasty, Jan 6, 2006
  10. Curtis

    Greg N. Guest

    It certainly depends on the individual site. In my case, the inline
    styles add 0.01 % to my site's bandwidth requirements. You may call
    that a penalty, I say it does not matter. In my case, anyway.
    Well, these are inline styles for a reason. They are computed by PHP
    depending on the size of the individual images being displayed. There
    can be dozens of variations of that code on a page. Not really practical
    to put that in any style sheet.
    Shifting the critique away from user penalty to server penalty? Again,
    we're talking about less than one-tenth of a percent of my server
    workload. Peanuts.
    Greg N., Jan 6, 2006
  11. Curtis

    Toby Inkster Guest

    You assume that there even *is* more than one page.

    Further, if a site has very few style elements that are common across the
    whole collection of pages -- that is, each page has a very different
    styling -- then it may indeed be more efficient to include styling
    information directly in the pages themselves.
    Toby Inkster, Jan 8, 2006
  12. Yep, that was an assumption. I assumed most web sites have multiple
    If there is very little use of CSS, then this could be true.
    Beauregard T. Shagnasty, Jan 9, 2006
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.