Grow your CSS skills. Land your dream job.

Dynamic css

  • # July 30, 2010 at 2:17 pm

    Hi All

    I remember seeing a post somehwere on the interweb a few months back about an interesting way of writing CSS, problem is i cant remember the article or find it again.

    The jist of the method was that you could set values to colours for example so you could change the red you use throughout a website in one place rather than having to change it in loads, example below

    red {#ff0000}

    #header p {
    color: red;
    }

    #footer p {
    color: red;
    }

    So you could just change the color used at the top to change both p tags below.

    Does anyone remember this as well or have a link to the article?

    # July 30, 2010 at 2:40 pm

    I think, you mean somethin like LESS (which works with JS)? For a great tutorial, head over to nettuts! There are also some tools built with php – just google for them (I can’t remember one at the moment – sorry). But – as always – you could also build your own solution… (with php)

    Code:
    <?php
    header(‘Content-Tpye:text/css’); //output css
    $red = "#f00"
    ?>
    #header p, #footer p{
    color: <?=$red?>
    }

    Hope this helps,
    Linus

    # July 30, 2010 at 2:49 pm
    "limenet" wrote:
    I think, you mean somethin like LESS (which works with JS)? For a great tutorial, head over to nettuts! There are also some tools built with php – just google for them (I can’t remember one at the moment – sorry). But – as always – you could also build your own solution… (with php)

    Code:
    <?php
    header(‘Content-Tpye:text/css’); //output css
    $red = "#f00"
    ?>
    #header p, #footer p{
    color: <?=$red?>
    }

    Hope this helps,
    Linus

    Sure did, thats exactly the thing i was looking for :D

    Cheers.

    # August 4, 2010 at 10:14 am

    oh… in case you want more comfort (automatic rewriting of url’s and caching …) nettuts has a very nice solution :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".