How can i reuse a color in a stylesheet?

Question

Hi,

i have a stylesheet and a lot of styles with the same border color (#CCCCCC to be precise).

Is there a way to specify some kind of variable and reuse that, so in stead of typing #CCCCCC over and over, i can type

border: 1px solid $bordercolor;

ps i'm using asp.net mvc

Answer 1

You could set the border style for a parent tag. For example if every element in your #content uses this border properties you could apply the desired border style to #content itself.

Answer 2

Extend the style within the color is defined

LE: see the sample from KennyTM

Answer 3

Not that I'm aware of, but you could generate your CSS from a .NET page.

Then call it with

And StyleSheet.aspx would look something like

<%@ Page Language="C#" %> 
H1 
{ 
  background-color:<%= MyColourVariable %>; 
}

Answer 4

.classA, .classB, .classC {
   border-color: #CCC;
}

.classA {
   border-width: 1px;
   border-style: solid;
}

...

But you can't use the short-hand syntax to define the border anymore.

Answer 5

An element may have multiple classes assigned. So you could create one style that defines you border color and use it in conjunction with other classes for other attributes:

.bordercolor { border-color:#CCCCCC; }

<div class="bordercolor otherstyle">

Answer 6

Aside from generating it from a .NET page you could use some sort of pre-processor. There are general use ones such as m4 or CSS specific ones such as LESS.

Answer 7

You can serve your CSS as a php file with the type text/css. Then that way you can use all the PHP variables you want. This works in every browser. Here is an example:

http://mailmarkup.org/mmlorg.php

Answer 8

You can't really define variables in CSS, but you can sort of do what you are after a few ways. First, you could apply multiple classes to your element and just keep color in it's own class.

.myBorderColor { border-color: #000000; }
.myOtherClass { font-weight: bold; }

<div class="myBorderColor myOtherClass">content</div>

The other alternative is to actually cascade your styles so more than 1 block is applied.

div.a { font-weight: bold; }
div.b { color: #cccccc; }

div.a div.b { border-color: #000000; }

That way you are still controlling your color from 1 place.

Answer 9

I think you may be referring to CSS variables. Unfortunately they are not well supported.

Answer 10

A number of folks have done HttpHandlers that add variable support to CSS. Basically, the HttpHandler takes care of replacing the variables with their values before the client sees the CSS. Examples include:

• http://www.devwebprose.com/devwebprose-109-20061016AddvariablestostandardCSSstylesheetsinASPNET.html
• http://www.aspnetresources.com/articles/variables_in_css.aspx

This will certainly work. I have not tried it in any of my applications so I cannot speak to performance implications.

Answer 11

You could also use a "higher-level" CSS. Sass and Less both offer variables. They work by writing in a language that is a superset of CSS and then you compile it to CSS when you are testing/deploying. There are hooks for RoR for both, there might be one for asp.net.

Answer 12

I was thinking about the T4 template too. It's Visual Studio only i think, so it's not the most generic way to go, but i thought i'd share it.

<#@ template inherits="Microsoft.VisualStudio.TextTemplating.VSHost.ModelingTextTransformation" language="C#v3.5" debug="true" hostSpecific="true" #>
<#@ output extension=".css" #>
<# string font = " font-family: Verdana, Helvetica;\n\tfont-size: 11px;";#>

body { 
    <#= font #>
}
table.Bid {
    background-color:red;
    <#= font #>
}

This generates a test.css file with this content:

body { 
     font-family: Verdana, Helvetica;
    font-size: 11px;
}
table.Bid {
    background-color:red;
     font-family: Verdana, Helvetica;
    font-size: 11px;
}