Question

Is it possible to define the default text color codes in a stylesheet

For example: I use this color all over my site, I hate typing it. color:#27408B;

Instead what I want to do is define the default text blue to be color:#27408B;

so I can just type border:1px solid blue; and it will come out border:1px solid #27408B;

Answer 1

What you’re looking to do can be accomplished by using a CSS Pre-processor. LESS, Sass, and Stylus are some of the more notable ones out there. Pre-processors allow you to create variables, mixins, functions, and more to help streamline your work.

To create a variable, all you’ll need to do is declare it in your stylesheet accordingly:

@blue = "#27408b"

In the example above, @blue is the name of the new variable, whereas the value between the quotations is the true value for @blue henceforth.

body {background: @blue;} /* your background will be the color #27408b */
a {color: @blue;} /* your link will be the color #27408b */
div {border: 1px solid @blue;} /* your 1px border will be the color #27408b */