CSS也有變量和計算了

看到標題，也許你會疑問：“嘿，這又是一個把less當做css的靚仔”，less是css擴展語言，增加了很強大的功能，其中就有變量和計算，

當然擴展語言不止less這一種，例如sass、stylus等等。

 

注意了，雖然這些可擴展語言有變量和計算，但事實上，css本身也有var()變量和calc()計算，所以說，能用原生css實現的，就不要麻煩

老less了

 

2017年接觸css時，並不知道CSS已經有var()和calc()，變量和計算，就算是偶然看見，也是匆匆一別，心想之，這些陌生屬性必是兼容

性差，而且看起來好復雜的模樣，所以，棄之。時至今天，我發現，用它們來開發響應式網站，效率可觀啊，於是，上手學習+實戰，屢

試不爽。長話短說，我這就記錄var()和calc()基礎用法

 

CSS var() 函數

var()可用於插入一個自定義的變量，如何定義變量？看實例（這有一點要注意的是，自定義名稱，必須以--開頭）

菜鳥實例

定義一個名為 "--main-bg-color" 的屬性，然后使用 var() 函數調用該屬性：

:root {
  --main-bg-color: coral;
}
 
#div1 {
  background-color: var(--main-bg-color);
}
 
#div2 {
  background-color: var(--main-bg-color);
}

 

效果

 

 

 

嘗試一下 »

瀏覽器支持

 

 

 

CSS calc() 函數

calc() 函數用於動態計算長度值。

• 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
• 任何長度值都可以使用calc()函數進行計算；
• calc()函數支持 "+", "-", "*", "/" 運算；
• calc()函數使用標准的數學運算優先級規則；

 

菜鳥實例

使用 calc() 函數計算 <div> 元素的寬度:

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: green;
    padding: 5px;
    text-align: center;
}

 

嘗試一下 »

效果

 

 

瀏覽器支持