變數
一般地，我們在進行web開發時，會有一套變數定義規範，以sass為例，如下所示
// 顏色定義規範$color-background : #222$color-background-d : rgba(0, 0, 0, 0.3)$color-highlight-background : #333//字型定義規範$font-size-small : 12px$font-size-medium : 14px$font-size-large : 18px
而CSS變數的文法如下
【聲明變數】
變數必須以--開頭。例如--example-variable: 20px，意思是將20px賦值給--example-varibale變數
可以將聲明變數的語句置於任何元素內，如果要設定全域變數，則可以設定為:root、body或html
:root{--bgColor:#000;}
變數聲明就像普通的樣式聲明語句一樣，也可以使用內聯樣式
<body style="--bgColor:#000">
【使用變數】
使用var()函數使用變數，並且可以被使用在任意的地方。例如：var(--example-variable)會返回--example-variable所對應的值
<body style="--bgColor:#000;"> <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p> </body>
var()函數還有一個選擇性參數，用來設定預設值，當變數無法取得值時，則使用預設值
<p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>
[注意]關於CSS變數的詳細用法移步至此
@apply
介紹@apply之前，先介紹一下sass中的混合宏@mixin，指可以重用的代碼塊
比如，常見的文字溢出隱藏重用
@mixin overflow-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; };p { @include overflow-ellipsis;}
而應用規則集@apply也是實作類別似的功能。與var()相比，@apply是引用樣式的集合，而var()是引用一個單獨的樣式值
:root{ --overflow-ellipsis:{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; };}.title{ width:200px; @apply --overflow-ellipsis;}
自訂選取器
自訂選取器通過@custom-selector來定義，後面跟隨一個:--接著是自訂選取器的名稱，後面是需要定義的選取器，多個用逗號隔開
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
這樣，:--heading就成為一個可以使用的選取器
:--heading{ margin: 0;}h1, h2, h3, h4, h5, h6｛ margin: 0; ｝
上面兩段代碼的效果相同
選取器嵌套
CSS規則包含許多重複的內容
table.colortable td { text-align:center;}table.colortable td.c { text-transform:uppercase;}table.colortable td:first-child, table.colortable td:first-child+td { border:1px solid black;}table.colortable th { text-align:center; background:black; color:white;}
使用嵌套文法後，代碼如下
table.colortable { & td { text-align:center; &.c { text-transform:uppercase } &:first-child, &:first-child + td { border:1px solid black } } & th { text-align:center; background:black; color:white; }}
當使用嵌套樣式規則時，必須能夠引用由父規則匹配的元素; 畢竟是整個嵌套點。為了達到這個目的，這個規範定義了一個新的選取器，即嵌套選取器，寫成ASCII符號＆
當在嵌套樣式規則的選取器中使用時，嵌套選取器表示由父規則匹配的元素。在任何其他情況下使用時，它什麼都不代表。（也就是說，它是有效，但不匹配任何元素）
[注意]&嵌套選擇符的兩種錯誤寫法如下所示
.foo { color: red; .bar & { color:blue; }}.foo { color: red; &.bar, .baz { color: blue; }}
【@nest】
為瞭解決上面的嵌套選擇符&的脆弱，可以使用@nest選擇符，@nest可適用範圍更廣，只要與嵌套選擇符&共同作用即可
.foo { color: red; @nest & > .bar { color: blue; }}//等價於 .foo { color: red; } .foo > .bar { color: blue; }.foo { color: red; @nest .parent & { color: blue; }}//等價於 .foo { color: red; } .parent .foo { color: blue; }.foo { color: red; @nest :not(&) { color: blue; }}//等價於 .foo { color: red; } :not(.foo) { color: blue; } [注意]@nest選擇符的兩種錯誤寫法如下所示.foo { color: red; @nest .bar { color: blue; }}.foo { color: red; @nest & .bar, .baz { color: blue; }}
最後
遺憾地是，除了CSS變數variable可以在新版本chrome下使用外，其他CSS選取器的新用法目前都沒有瀏覽器支援。但是，CSS後處理器postcss中的cssnext外掛程式可以解決所有問題
就像cssnext官網說的一樣，今天就開始使用明天的CSS文法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
