我可以在另一個css定義中包含css定義嗎？

所以我們可以說在「foo.css」我有以下幾點：我可以在另一個css定義中包含css定義嗎？

.border { border : solid 1px; } 
#foo { color : #123; } 
#bar { color : #a00; }

現在，讓我們說，我有兩個div我想爲邊界，所以我做的：

<div id="foo" class="border">Foo</div> 
<div id="bar" class="border">Bar</div>

這工作正常，但我發現，在我的CSS文件中定義#foo和#bar的時候，我寧願給他們.border的特性不是給div的類，像這樣：

.border { border : solid 1px; } 
#foo { 
    <incantation to inherit from .border> 
    color : #123; 
} 
#bar { 
    <incantation to inherit from .border> 
    color : #a00; 
}

，然後我的HTML WO uld只是：

<div id="foo">Foo</div> 
<div id="bar">Bar</div>

有人知道那是什麼魔法咒語嗎？

來源

2010-02-12 ynkr

你可能感興趣mixins with Sass。 Sass讓你用更高效的方式編寫css樣式表，使用這樣的技巧。 Mixins允許你定義一組屬性（比如說處理邊框），然後在某些CSS類中包含這些屬性。

來源

2010-02-12 23:53:19 Peter

嗯，有趣。我已經在使用haml，所以使用sass來處理我的css文件將是很自然的下一步，並解決這個特殊的css缺點。感謝你們每個人的迴應！ – ynkr 2010-02-13 00:02:19

這不支持CSS。你能做的最好的是這樣的：

#foo, #bar, .border { border : solid 1px; } 
#foo { color : #123; } 
#bar { color : #a00; }

來源

2010-02-12 23:47:31 wsanville

題外話，我會補充說，當使用'邊界'速記時，值的正確順序是'border-width'，然後'border-style'，然後'border-color'。因此，'border：solid 1px'是無效的CSS，它應該是'border：1px solid'。目前，瀏覽器對這類錯誤非常寬容，但這不是無限期依賴的。 – 2010-02-12 23:58:37

好點，我只是複製了OP的樣式而不修改實際的規則。 – wsanville 2010-02-13 00:01:17

我真的不能真正做#foo，＃bar，.border {border：solid 1px}的東西，因爲我想要的真正定義是在jquery-ui css文件中，我很熱鏈接到這就是爲什麼我需要解決方案如上所述。感謝您的回覆，知道它無法完成是有幫助的。另外，我不知道邊界秩序的事情。謝謝。 – ynkr 2010-02-13 00:05:53

正如Wsanville所說，你不能使用這個類。但正常CSS繼承做的工作 - 比如，如果你的HTML是

<div class="border"> 
    <div id="foo"> 
     hello 
    </div> 
    <div id="bar"> 
     world 
    </div> 
</div>

可以說

.border {border: 1px solid #f00;} 
#foo {border:inherit;}

如果你正在尋找推動其在某些情況下可能是不夠好

來源

2010-02-12 23:57:58 Marcus

您CSS進一步而不是使用前面文章中列出的一些技巧，你應該看看CSS編譯器。他們採用CSS編寫的代碼，通常是CSS添加了一些技巧，並將它們轉換爲網絡的普通CSS。

David Ziegler寫了一些涼爽的特色CSS編譯器提供：

變量 - 優秀的程序員不喜歡硬編碼。在許多情況下，您可以通過使用良好的繼承來避免這種情況，但有時候這是不可避免的。通過變量，更改顏色方案意味着更新一個變量而不是13個屬性。

數學 - 這與變量結合在一起。假設你的左欄是100px，右欄是500px，你的包裝div是600px。那麼，也許你決定把它改成960像素。如果自動調整列的寬度，它會不會很棒？答案是肯定的。

嵌套樣式 - 這可能是最重要的。 CSS是平坦的，這意味着複雜的網站最終會導致CSS的痛苦。

你可以在他的blog post on the subject閱讀流行的編譯器，或者做一些搜索，找到一個最適合你的。

來源

2010-02-13 00:08:42

我可以在另一個css定義中包含css定義嗎？

回答

相關問題