CODEWITHSUNDEEP
phpjquerycsscolors
Fewfre
Fewfre

Reputation: 1509

Define custom color

border:3px solid black;

In the above example, you can set color by saying the color's name. There is also a wide verity of color name out there also.

And so my question is this. Is there a way to define your own custom color name on your site in css, javascript/jquery, or even php.

Why? (I'm partially mad, but) In c# it can be handy to have a global variable to use that you can change and it would effect everything using it, and I would love a similar effect.

You may ask "Couldn't you just use class="myColor"?" I COULD, but I don't always use the color the same way, I sometimes use it for borders, background, or even text. Also, I'd have to give it a class, rather than declare it in css, which for a border can be weird.

Basically, I was wondering if there's anything even close to what I am looking for, be it css (so doubt it), jquery, or even php. Considering I want to use this color name in css I doubt this is possible, but I would love to be proven wrong.

Upvotes: 1

Views: 468

Answers (6)

Eric
Eric

Reputation: 97661

This may be coming to CSS eventually.

Upvotes: 0

Akarun
Akarun

Reputation: 3350

You can use "LESS" or "SASS" to do that.

@myColor: #FFCC00;
...
background-color: @myColor;
...
border: 1px solid @myColor;

Upvotes: 0

Paul
Paul

Reputation: 141897

There is nothing built into CSS for this. You may want to look into LESS. With it you could easily put a color in a variable and use it throughout your CSS. LESS is designed to make CSS more DRY.

Here is the description of it from that link:

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

Upvotes: 0

Christopher Marshall
Christopher Marshall

Reputation: 10736

You can set variables using a CSS PreProcessor such as SASS or LESS.

Using SASS it looks like this. 

$lightGrey :#5e5e5el;

a {
    color: $lightGrey;
}

Output: 

a {
    color: #5e5e5e;
}

Upvotes: 6

Pavel Strakhov
Pavel Strakhov

Reputation: 40512

SASS has this useful feature (and many others).

Upvotes: 0

kevin628
kevin628

Reputation: 3526

Use a color value as opposed to a named color: https://developer.mozilla.org/en/CSS/color_value

Upvotes: 0

Related Questions