#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    118
    Rep Power
    10

    Possible to use text instead of hex?


    On my website I'll be using the same colors over and over.

    Instead of doing something like this...

    Code:
    #container { 
    background: #000000;
    color : #080808;
    }
    
    
    /* TOP TITLE BAR */
    
    #top { 
    color:#000000;
    background: #038EE2;
    }
    I could do something like this..

    Code:
    Color1: #000000;
    Color2: #080808;
    Color3: #038EE2;
    
    #container { 
    background: Color1;
    color : Color2;
    }
    
    
    /* TOP TITLE BAR */
    
    #top { 
    color: Color1;
    background: Color3;
    }
    Anyway to do this?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,109
    Rep Power
    4307
    Plain CSS does not support variables at this time. One solution would be to use a CSS pre-processor like LESS or SASS.

    I don't use them myself. I prefer writing code by hand and optimizing it myself. (I'm not aware of any of CSS pre-processor that performs optimizations on the stylesheets it outputs.)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    118
    Rep Power
    10
    Hmm, maybe I'll just skip the idea then.
    Last edited by KingOfHeart; March 21st, 2013 at 09:10 PM.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,109
    Rep Power
    4307
    An alternative solution would be to have a section of your stylesheet just for specifying colors. Remember that CSS allows you to have multiple rules for an element, even using the exact same selectors.

    Code:
    /***  Main Colors ***/
    #header,
    #footer {
      background-color: #618;
      color: #fff;
    }
    .content {
      background-color: #fff;
      color: #618;
    }
    .content a {
      color: #248;
    }
    #footer a {
      color: #adf;
    }
    
    /*** Header ***/
    #header {
      width: 960px;
      margin: 0 auto;
      min-height: 180px;
    }
    [...]
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    118
    Rep Power
    10
    Ahh, maybe that will work in most cases.

IMN logo majestic logo threadwatch logo seochat tools logo