twitter/bootstrap — Issue #1368: Small enhancement docs
Author: Mingun
Created: 2012-01-29 07:14:27+00:00
State: open

In the section **Using LESS / Variables** a good idea to add color preview box for variables that determine the color. For example:

Example markup:

```html

@linkColor
#08c
Default link text color

```
where `linkColor` is variable name. In less file:

```less
span.example {
.pull-right;
width: 30px;
height: @baseLineHeight + 1;
.border-radius(3px);
// for white color
&.bordered {
height: @baseLineHeight - 1;
border: 1px solid #e1e1e8;
}

&.color {
// Links
&.linkColor { background-color: @linkColor; }
// etc...
}
```
But i don't know, **bootstrap** use less file in docs or not. It seems that does not use. Then the resulting css would be:

```css
span.example {
float: right;
width: 30px;
height: 19px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
span.example.bordered {
height: 17px;
border: 1px solid #e1e1e8;
}
span.example.color.linkColor {
background-color: #0088cc;
}
/* etc... */
```