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

    Join Date
    Sep 2008
    Posts
    118
    Rep Power
    6

    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,127
    Rep Power
    4304
    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
    6
    Hmm, maybe I'll just skip the idea then.
    Last edited by KingOfHeart; March 21st, 2013 at 08:10 PM.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    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
    6
    Ahh, maybe that will work in most cases.

IMN logo majestic logo threadwatch logo seochat tools logo