Tôi làm cách nào để sử dụng lại màu trong biểu định kiểu?

Question

Tôi có một biểu định kiểu và nhiều kiểu có cùng màu viền (#CCCCCC để chính xác).

Có cách nào để xác định một số loại biến và tái sử dụng đó, vì vậy thay vì gõ #CCCCCC hơn và hơn, tôi có thể gõ:

border: 1px solid $bordercolor; 

T.B. Tôi đang sử dụng ASP.NET MVC.

Answer 1

Không phải là tôi biết, nhưng bạn có thể tạo CSS của bạn từ một trang .NET.

Sau đó, gọi nó với

Và StyleSheet.aspx sẽ giống như

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

EDIT: Tuy nhiên, hôm nay tôi sẽ đề nghị sử dụng LESS hoặc SASS

Answer 2

Bạn có thể đặt kiểu đường viền cho thẻ cha. Ví dụ: nếu mọi phần tử trong #content của bạn sử dụng thuộc tính đường viền này, bạn có thể áp dụng kiểu đường viền mong muốn cho #content chính nó.

Answer 3

Mở rộng phong cách trong màu sắc được xác định

LE: xem mẫu từ KennyTM

Answer 4

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

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

... 

Nhưng bạn có thể' t sử dụng cú pháp ngắn để xác định đường viền nữa.

Answer 5

Một phần tử có thể được gán nhiều lớp. Vì vậy, bạn có thể tạo ra một phong cách định nghĩa bạn đường viền màu và sử dụng nó kết hợp với các lớp khác cho các thuộc tính khác:

.bordercolor { border-color:#CCCCCC; } 

<div class="bordercolor otherstyle"> 

Answer 6

Bên cạnh việc tạo ra nó từ một trang NET bạn có thể sử dụng một số loại tiền xử lý. Có những cách sử dụng chung như m4 hoặc CSS cụ thể như LESS.

Answer 7

Bạn có thể phân phối CSS dưới dạng tệp php với loại văn bản/css. Sau đó, bạn có thể sử dụng tất cả các biến PHP mà bạn muốn. Điều này làm việc trong mọi trình duyệt. Dưới đây là một ví dụ:

http://mailmarkup.org/mmlorg.php

Answer 8

Bạn có thể không thực sự xác định các biến CSS, nhưng bạn có thể loại làm những gì bạn đang theo đuổi một số cách. Đầu tiên, bạn có thể áp dụng nhiều lớp cho phần tử của bạn và chỉ giữ màu trong lớp riêng của nó.

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

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

Cách khác là thực sự xếp tầng kiểu của bạn để áp dụng hơn 1 khối.

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

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

Bằng cách đó bạn vẫn đang kiểm soát màu của mình từ 1 vị trí.

Answer 9

Tôi nghĩ bạn có thể đang đề cập đến CSS variables. Thật không may họ không được hỗ trợ tốt.

Answer 10

Một số người đã thực hiện HttpHandlers thêm hỗ trợ biến cho CSS.Về cơ bản, HttpHandler đảm nhiệm thay thế các biến bằng các giá trị của chúng trước khi máy khách nhìn thấy CSS. Ví dụ như:

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

Điều này chắc chắn sẽ làm việc. Tôi đã không thử nó trong bất kỳ ứng dụng của tôi vì vậy tôi không thể nói chuyện với ý nghĩa hiệu suất.

Answer 11

Bạn cũng có thể sử dụng CSS "cấp cao hơn". Sass và Less cả hai biến phiếu mua hàng. Chúng hoạt động bằng cách viết bằng một ngôn ngữ là một siêu của CSS và sau đó bạn biên dịch nó thành CSS khi bạn đang thử nghiệm/triển khai. Có móc cho RoR cho cả hai, có thể có một cho asp.net.

Answer 12

Tôi cũng đã suy nghĩ về mẫu T4. Đó là Visual Studio chỉ tôi nghĩ, vì vậy nó không phải là cách chung chung nhất để đi, nhưng tôi nghĩ rằng tôi muốn chia sẻ nó.

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

này tạo ra một tập tin test.css với nội dung này:

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

Answer 13

Trong Rails, điều này hoạt động tuyệt vời cho tôi:

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

có lẽ bạn có thể viết một tiền tương tự -quản lý cho khung công tác .NET ..?