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

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

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

border: 1px solid $bordercolor;

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

Ответы

Ответ 1

Не то, что я знаю, но вы можете создать свой CSS с .NET-страницы.

Затем назовите его

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

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

EDIT: Однако сегодня я бы предложил использовать LESS или SASS

Ответ 2

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

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

...

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

Ответ 3

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

.bordercolor { border-color:#CCCCCC; }

<div class="bordercolor otherstyle">

Ответ 4

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

Ответ 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 места.

Ответ 6

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

Ответ 7

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

http://mailmarkup.org/mmlorg.php

Ответ 8

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

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

Ответ 9

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

Ответ 10

Я тоже думал о шаблоне T4. Это 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;
}

Ответ 11

Вы можете установить стиль рамки для родительского тега. Например, если каждый элемент вашего #content использует эти свойства границы, вы можете применить желаемый стиль границы к самому #content.

Ответ 12

Расширить стиль внутри цвета

LE: см. образец от KennyTM