Как я могу повторно использовать цвет в таблице стилей?

Question

У меня есть таблица стилей и множество стилей с одинаковым цветом рамки (точнее, #CCCCCC).

Есть ли способ указать какую-то переменную и использовать ее повторно, поэтому вместо ввода #CCCCCC снова и снова я могу набрать:

border: 1px solid $bordercolor;

P.S. Я использую ASP.NET MVC.

Answer 1

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

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

...

Но вы не можете больше использовать сокращенный синтаксис для определения границы.

Answer 2

Элемент может иметь несколько назначенных классов. Таким образом, вы можете создать один стиль, который определяет ваш цвет границы и использовать его вместе с другими классами для других атрибутов:

.bordercolor { border-color:#CCCCCC; }

<div class="bordercolor otherstyle">

Answer 3

Не то чтобы я об этом знал, но вы можете сгенерировать свой CSS со страницы .NET.

Тогда назовите это с

И StyleSheet.aspx будет выглядеть примерно так:

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

РЕДАКТИРОВАТЬ: Однако сегодня я бы предложил использовать МЕНЬШЕ или SASS

Answer 4

Вы также можете использовать CSS более высокого уровня. Sass и Меньше обе предлагают переменные. Они работают, написав на языке, который является надмножеством CSS, а затем вы компилируете его в CSS при тестировании / развертывании. Есть крючки для RoR для обоих, может быть один для asp.net.

Answer 5

Вы не можете определить переменные в CSS, но вы можете сделать то, что вы делаете, несколькими способами.Во-первых, вы можете применить несколько классов к своему элементу и просто сохранить цвет в своем собственном классе.

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

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

Другая альтернатива состоит в том, чтобы на самом деле каскадировать ваши стили, чтобы было применено более 1 блока.

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

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

Таким образом, вы по-прежнему управляете своим цветом с 1 места.

Answer 6

Я думаю, вы можете ссылаться на переменные CSS . К сожалению, они не очень хорошо поддерживаются.

Answer 7

Вы можете использовать свой CSS как php-файл с типом text / css. Таким образом, вы можете использовать все переменные PHP, которые вы хотите. Это работает в любом браузере. Вот пример:

http://mailmarkup.org/mmlorg.php

Answer 8

Несколько человек сделали HttpHandlers, которые добавляют переменную поддержку CSS. По сути, HttpHandler заботится о замене переменных их значениями до того, как клиент увидит CSS. Примеры включают в себя:

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

Это, безусловно, будет работать. Я не пробовал его ни в одном из своих приложений, поэтому не могу говорить о влиянии на производительность.

Answer 9

Я тоже думал о шаблоне Т4. Я думаю, это только Visual Studio, так что это не самый общий способ, но я решил поделиться им.

<#@ 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 #>
}

Создает файл test.css с таким содержанием:

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

Answer 10

Помимо генерации его из .NET-страницы, вы можете использовать своего рода препроцессор. Есть общепринятые, такие как m4 или CSS, например, LESS .