Is it possible to use variables within a CSS document, possibly by using Javascript?
For example if I have an overall variable "colorOne" assigned to "#ffffff".
Is it then possible to to call "colorOne" later? e.g. "color: colorOne;"?
I could use find and replace to replace instances but this becomes very tedious, is there an alternative?
In pure css - NO!
But you can use many tools that allow to do it and compile css for you:
You can use a preprocessor, for instance: http://lesscss.org/
What this enables you to do is write your CSS like this
@colorOne: #FFFFFF;
.main_links {
color: @colorOne;
}
h2 {
color: @colorOne;
}
and the output once it's compiled will be
.main_links {
color: #FFFFFF;
}
h2 {
color: #FFFFFF;
}
There are more reasons to use LESS than just assigning variables, it's powerful and allows you to do a lot more, like nested styles, have a look at the documentation: http://lesscss.org/#synopsis
Dont forget SASS too. http://sass-lang.com
Syntatically Awesome Stylesheets.
You can't use variables in pure CSS, but aside from things like LESS, there is another way (not the cleanest admittedly, but it works...sort of).
Set up classes which represent your variables:
.color-black {
color: #000000;
}
.color-red {
color: #FF0000;
}
You can then specify multiple classes against an element:
<div class="some-class other-class color-black"></div>
<div class="some-class other-class color-red"></div>
Thereafter, whenever you change the value in color-black, or color-red, this will change the color across all elements using that class.
As I've stated, it's not the cleanest way to do things, and can lead to bloated html/css, but it can have it's uses...say for example in a testing environment if you're testing color schemes / designs.
Note: One other thing to mention is that using this method allows you to swap out classes dynamically using javascript, as you have mentioned in your question.
Example (with jQuery)
$("#MyDiv").mouseenter(function() {
$(this).removeClass("color-red").addClass("color-black");
}).mouseleave(function() {
$(this).removeClass("color-black").addClass("color-red");
});
