CSS變量是CSS3的一個新功能，它可以讓我們創(chuàng)建一些自定義的變量，以便在整個樣式表中使用。通俗點說，就是定義一些變量，然后在需要的地方直接調(diào)用這些變量即可。

/*定義變量*/
:root{
--primary-color: #7a53de;
}
/*使用變量*/
.title{
color: var(--primary-color);
}

上面的代碼中，我們將主色調(diào)顏色聲明為變量primary-color，并將其值設(shè)置為#7a53de。接著，在樣式中需要使用主色調(diào)的地方，我們直接使用var()函數(shù)來調(diào)用該變量。

下面再演示一個使用CSS變量實現(xiàn)多行文本省略的效果的例子：

:root {
--line-clamp: 3;
--ellipsis: "...";
}
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--line-clamp);
overflow: hidden;
}
.text::after {
content: var(--ellipsis);
}

上面的代碼中，我們使用了兩個變量，--line-clamp表示需要省略的行數(shù)，--ellipsis則表示省略號樣式。在.text樣式中，我們使用了-webkit-box屬性和-webkit-line-clamp屬性來設(shè)置多行文本省略的樣式，使用變量來代替固定的數(shù)值。最后使用::after偽元素來添加省略號樣式。