css的變數和繼承的學習筆記

朋友，百姓網前端架構師css魔法的《css揭秘》，已經出版發行，並贈送了我一本。看了一下這本書，確實有很多css技巧。讓你會有蠻大的收穫，在這裡幫他宣傳一下！今天所說的案例呢，也是部分借鑒這本書的。今天和大家聊聊css變數和繼承！

有人會說，css怎麼會有變數和繼承？你是說的css處理器吧！

不是，我說的是純css，其實，css也在努力融入各種前置處理器的特性和寫法，甚至有些屬性比前置處理器更加強大，例如：

閑話少說，我們還是切入正題吧！

css變數

其實我說的變數，並非css處理器中的自訂變數，而是css某些屬性有類似變數的功能！

這個屬性就是currentColor

currentColor 的應用

1、鏤空圖片鏤空和currentColor

代碼如下：

.icon {
    display: inline-block;
    width: 16px; height: 20px;
    background-image: url(h/216/0y89gzo2/sprite_icons.png);
    background-color: currentColor; /* 該顏色控製圖標的顏色 */
}
.link:hover { color: #333; }/* 雖然改變的是文字顏色，但是表徵圖顏色也一起變化了 */

解釋： 預設表徵圖的背景顏色currentColor用的是link的顏色，link顏色改變時，表徵圖的背景顏色也隨著改變！

2、水平分割線和文本顏色保持一致，假如你所有的hr 顏色要和文本顏色保持一致，有了currentColor，可以如下寫

hr{height:.5em;background:currentColor}

假如你的文本顏色變了，hr也會自動變。

css繼承

繼承我們用的是inherit屬性

這個應用到時蠻多的，例如設定字型，表單的字型我們要和頁面其他部分相同，我們不用重複定於，只要繼承其他的就可以！

input,select,button{font:inherit}

超連結顏色與其他顏色相同，可以用：

a{color:inherit}

提示對話方塊的小箭頭，要和整體對話方塊一直，包括邊框和背景，我們可以用inherit

關於對話方塊，我前面文章也有關於css書寫對話方塊的 ，但是這種寫法對於對話方塊的邊框很難控制，看下下面的這個應用吧！

代碼如下：

.callout{position:relative;width:300px;height:200px;background-color:#ccc;border:1px solid red;}
.callout::before{content:"";position:absolute;top:-.4em;left:1em;padding:.35em;background:inherit;
border:inherit;border-right:0;border-bottom:0;transform:rotate(45deg);}//先寫一個正方形，然後旋轉45度變為三角形

例子

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
 
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
</div>

背景和邊框繼承callout，這樣寫起來更加方便了！