hinese-gradient是一款利用CSS自定義屬性來(lái)制作的中文漸變色CSS庫(kù)，由于各式各樣、五彩斑斕的漸變色千變?nèi)f化，再加上許多英文過(guò)于抽象十分難記，于是就有了這款中文屬性庫(kù)。

該庫(kù)使用方式也是十分的簡(jiǎn)單，只需要把你原來(lái)寫(xiě)的 background: xxx; 替換為 background: var(--xxx); 即可。

如：

以前：background: blue;

現(xiàn)在：background: var(--湖藍(lán));

安裝

要記得先引入這個(gè)庫(kù)才能夠去正常的使用。如果你的項(xiàng)目是一個(gè)工程化的項(xiàng)目，那么：

npm i chinese-gradient

記得要在主文件中引入：

import 'chinese-gradient'

同時(shí)也支持sass、less等，如:

import 'chinese-gradient/chinese-gradient.scss'

如果你只是想在<link>標(biāo)簽里引入的話，那么：

<link rel="stylesheet" href="https://unpkg.zhimg.com/chinese-gradient">

全部漸變色

總結(jié)

說(shuō)實(shí)話，這樣的插件我都不想寫(xiě)總結(jié)，也沒(méi)啥總結(jié)的，感覺(jué)應(yīng)用場(chǎng)景基本沒(méi)有，自己練習(xí)還行。

而且最接受不了的就是顏色用中文命名，這么多誰(shuí)記得住。

當(dāng)之無(wú)愧最廢的CSS插件！

載說(shuō)明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

今天看了一篇國(guó)外的大佬關(guān)于“css嵌套語(yǔ)法”看法的文章，他認(rèn)為這個(gè)語(yǔ)法是完全無(wú)用的垃圾，并收到眾多網(wǎng)友的支持，在這里我將這個(gè)國(guó)外大佬的看法進(jìn)行了整理，歡迎大家在評(píng)論區(qū)探討。

國(guó)外大佬的看法

我真的很困惑，就像我對(duì)很多人盛贊的熱門時(shí)尚廢話一樣，我不明白為什么有人能看到CSS嵌套的價(jià)值。在LESS/SASS/SCSS中，它只會(huì)使代碼更加混亂，更難以跟蹤和調(diào)試，總之，只會(huì)增加更多的步驟和考慮，而沒(méi)有任何實(shí)際的好處。

但有趣的是，你會(huì)看到一些明顯是為了讓它看起來(lái)好看而堆疊的例子。你會(huì)看到一些垃圾代碼，比如：

.nesting {
    color: hotpink;
    
    >.is {
        color: rebeccapurple;

    >.awesome {
            color: deeppink;
        }
    }
}

當(dāng)你依賴制表符來(lái)保持事情的整潔時(shí)，必須不停地查找代碼中實(shí)際應(yīng)用的選擇器/組合器規(guī)則...那么優(yōu)勢(shì)在哪里呢？

而且，如果你進(jìn)入像實(shí)際的完整代碼庫(kù)這樣的東西，它真的會(huì)崩潰。每個(gè)選擇器字符串使用一個(gè)屬性是堆疊的。現(xiàn)實(shí)世界中？即使是像菜單這樣的小東西：

#mainMenu {

 ul {
 
  list-style:none;
 
  li {
   display:inline;
   
   a {
    display:inline-block;
    padding:0.5rem 1rem;
    color:var(--menuColor);
    border-radius:0.5rem;
    transition:background 0.3s, color 0.3s, scale 0.3s;
   }
   
   a:hover,
   a:focus {
    scale:1.2;
    background:var(--menuHoverBg);
    color:var(--menuHoverColor);
   }
   
  }
  
 }
 
}

當(dāng)你理解偽狀態(tài)時(shí)，如果沒(méi)有試圖在代碼中找到那些內(nèi)部的錨點(diǎn)而不是在整個(gè)代碼并嘗試弄清楚所有的縮進(jìn)，你怎么知道它們?cè)谀睦铮磕遣皇乔逦拇a！

相比之下：

#mainMenu ul {
 list-style:none;
}

#mainMenu li {
 display:inline;
}

#mainMenu a {
 display:inline-block;
 padding:0.5rem 1rem;
 color:var(--menuColor);
 border-radius:0.5rem;
 transition:background 0.3s, color 0.3s, scale 0.3s;
}
   
#mainMenu a:hover,
#mainMenu a:focus {
 scale:1.2;
 background:var(--menuHoverBg);
 color:var(--menuHoverColor);
}

這是一千倍更清晰的代碼，因?yàn)槟悴槐厝ふ腋高x擇器是什么！每個(gè)屬性和值的組合都有完整的聲明，說(shuō)明它在哪里、是什么和如何應(yīng)用的！規(guī)則越大，越多，就越是如此！

極簡(jiǎn)主義和字節(jié)癡迷之間有一種區(qū)別...后者聞起來(lái)像是“哇哇眼睛不想打字”的味道，這種情況下，也許應(yīng)該考慮一下你是不是從事錯(cuò)誤的業(yè)務(wù)。

盡管最熱烈歡呼的人似乎是那些“在每個(gè)該死的元素上添加垃圾類”的傻瓜，那么他們從組合器或嵌套中得到了什么效用呢？

這就像他們?cè)趯ふ襆ESS / SASS / SCSS這樣的垃圾，以及為什么人們會(huì)尋找HTML / CSS框架的1997年實(shí)踐的紀(jì)念碑一樣。這表明他們對(duì)HTML的最基本用法以及CSS與HTML的區(qū)別一無(wú)所知。

它肯定不會(huì)提高代碼的清晰度。

關(guān)于我的看法

以上是這位大佬的看法，以下是我對(duì)這個(gè)問(wèn)題的看法，歡迎大家來(lái)探討關(guān)于“css嵌套語(yǔ)法”的問(wèn)題。

我認(rèn)為這個(gè)問(wèn)題并不是非黑即白的。CSS嵌套語(yǔ)法可以使代碼更具可讀性和易維護(hù)性，但如果過(guò)度使用，也可能會(huì)導(dǎo)致代碼的冗長(zhǎng)和可讀性下降。

對(duì)于大多數(shù)項(xiàng)目來(lái)說(shuō)，選擇使用CSS嵌套語(yǔ)法還是不使用，應(yīng)該取決于具體情況。在某些情況下，使用CSS嵌套語(yǔ)法可以使代碼更加簡(jiǎn)潔和易于理解，而在其他情況下，使用它可能不那么合適。

那么如何選擇呢，以下是我的一些建議：

1. 項(xiàng)目規(guī)模和復(fù)雜度：如果項(xiàng)目規(guī)模較小且樣式較簡(jiǎn)單，使用CSS嵌套語(yǔ)法可能會(huì)增加代碼的冗長(zhǎng)和復(fù)雜度，反而降低了代碼的可讀性。但是，對(duì)于大型項(xiàng)目和復(fù)雜樣式，使用CSS嵌套語(yǔ)法可以使代碼更加結(jié)構(gòu)化和易于管理。

2. 開(kāi)發(fā)團(tuán)隊(duì)的技能水平：如果開(kāi)發(fā)團(tuán)隊(duì)中的成員都熟悉CSS嵌套語(yǔ)法并且能夠正確使用它，那么使用它可能會(huì)使開(kāi)發(fā)更加高效。但是，如果團(tuán)隊(duì)中的成員不熟悉CSS嵌套語(yǔ)法或者誤用它，那么可能會(huì)導(dǎo)致代碼的錯(cuò)誤和混亂。

3. 個(gè)人喜好和項(xiàng)目要求：有些開(kāi)發(fā)人員喜歡使用CSS嵌套語(yǔ)法，因?yàn)樗梢允勾a更加優(yōu)雅和易于閱讀。但是，有些項(xiàng)目可能對(duì)代碼的性能和可維護(hù)性有更高的要求，此時(shí)可以考慮不使用CSS嵌套語(yǔ)法。

總之，選擇是否使用CSS嵌套語(yǔ)法應(yīng)該根據(jù)項(xiàng)目的實(shí)際需求和開(kāi)發(fā)團(tuán)隊(duì)的技術(shù)水平來(lái)決定。如果正確使用，它可以使代碼更加優(yōu)雅和易于維護(hù)，但是過(guò)度使用可能會(huì)導(dǎo)致代碼的冗長(zhǎng)和可讀性下降。我們應(yīng)該根據(jù)項(xiàng)目的實(shí)際需求和具體情況進(jìn)行權(quán)衡和取舍，而不是一味地認(rèn)為某種方法是完全無(wú)用的垃圾。

結(jié)束

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。

篇文章是阮一峰老師發(fā)表于2017年（《CSS 變量教程 - 阮一峰的網(wǎng)絡(luò)日志），雖然以及過(guò)去6年有余，但至今讀來(lái)依然非常棒，今天搜索一個(gè)css變量相關(guān)的知識(shí)再次讀到，分享在這里，大家一起學(xué)習(xí)下，也推薦大家經(jīng)常去讀一讀阮老師的分享！

一、變量的聲明

聲明變量的時(shí)候，變量名前面要加兩根連詞線（--）。

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

上面代碼中，body選擇器里面聲明了兩個(gè)變量：--foo和--bar。

它們與color、font-size等正式屬性沒(méi)有什么不同，只是沒(méi)有默認(rèn)含義。所以 CSS 變量（CSS variable）又叫做"CSS 自定義屬性"（CSS custom properties）。因?yàn)樽兞颗c自定義的 CSS 屬性其實(shí)是一回事。

你可能會(huì)問(wèn)，為什么選擇兩根連詞線（--）表示變量？因?yàn)?foo被 Sass 用掉了，@foo被 Less 用掉了。為了不產(chǎn)生沖突，官方的 CSS 變量就改用兩根連詞線了。

各種值都可以放入 CSS 變量。

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

變量名大小寫(xiě)敏感，--header-color和--Header-Color是兩個(gè)不同變量。

二、var() 函數(shù)

var()函數(shù)用于讀取變量。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var()函數(shù)還可以使用第二個(gè)參數(shù)，表示變量的默認(rèn)值。如果該變量不存在，就會(huì)使用這個(gè)默認(rèn)值。

color: var(--foo, #7F583F);

第二個(gè)參數(shù)不處理內(nèi)部的逗號(hào)或空格，都視作參數(shù)的一部分。

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函數(shù)還可以用在變量的聲明。

:root { 
  --primary-color: red; 
  --logo-text: var(--primary-color);
}

注意，變量值只能用作屬性值，不能用作屬性名。

.foo { 
  --side: margin-top;
  /* 無(wú)效 */ 
  var(--side): 20px; 
}

上面代碼中，變量--side用作屬性名，這是無(wú)效的。

三、變量值的類型

如果變量值是一個(gè)字符串，可以與其他字符串拼接。

--bar: 'hello'; 
--foo: var(--bar)' world';

利用這一點(diǎn)，可以 debug（例子）。

body:after { 
  content: '--screen-category : 'var(--screen-category); 
}

如果變量值是數(shù)值，不能與數(shù)值單位直接連用。

.foo { 
  --gap: 20; 
  /* 無(wú)效 */ margin-top: var(--gap)px;
}

上面代碼中，數(shù)值與單位直接寫(xiě)在一起，這是無(wú)效的。必須使用calc()函數(shù)，將它們連接。

.foo { 
  --gap: 20; 
  margin-top: calc(var(--gap) * 1px);
}

如果變量值帶有單位，就不能寫(xiě)成字符串。

/* 無(wú)效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

四、作用域

同一個(gè) CSS 變量，可以在多個(gè)選擇器內(nèi)聲明。讀取的時(shí)候，優(yōu)先級(jí)最高的聲明生效。這與 CSS 的"層疊"（cascade）規(guī)則是一致的。

下面是一個(gè)例子。

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>藍(lán)色</p>
<div>綠色</div>
<div id="alert">紅色</div>

上面代碼中，三個(gè)選擇器都聲明了--color變量。不同元素讀取這個(gè)變量的時(shí)候，會(huì)采用優(yōu)先級(jí)最高的規(guī)則，因此三段文字的顏色是不一樣的。

這就是說(shuō)，變量的作用域就是它所在的選擇器的有效范圍。

body { 
  --foo: #7F583F;
} 
.content { 
  --bar: #F7EFD2; 
}

上面代碼中，變量--foo的作用域是body選擇器的生效范圍，--bar的作用域是.content選擇器的生效范圍。

由于這個(gè)原因，全局的變量通常放在根元素:root里面，確保任何選擇器都可以讀取它們。

:root { --main-color: #06c; }

五、響應(yīng)式布局

CSS 是動(dòng)態(tài)的，頁(yè)面的任何變化，都會(huì)導(dǎo)致采用的規(guī)則變化。

利用這個(gè)特點(diǎn)，可以在響應(yīng)式布局的media命令里面聲明變量，使得不同的屏幕寬度有不同的變量值。

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}

六、兼容性處理

對(duì)于不支持 CSS 變量的瀏覽器，可以采用下面的寫(xiě)法。

a {
  color: #7F583F;
  color: var(--primary);
}

也可以使用@support命令進(jìn)行檢測(cè)。

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

七、JavaScript 操作

JavaScript 也可以檢測(cè)瀏覽器是否支持 CSS 變量。

const isSupported=window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript 操作 CSS 變量的寫(xiě)法如下。

// 設(shè)置變量
document.body.style.setProperty('--primary', '#7F583F');

// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 刪除變量
document.body.style.removeProperty('--primary');

這意味著，JavaScript 可以將任意值存入樣式表。下面是一個(gè)監(jiān)聽(tīng)事件的例子，事件信息被存入 CSS 變量。

const docStyle=document.documentElement.style;

document.addEventListener('mousemove', (e)=> {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

那些對(duì) CSS 無(wú)用的信息，也可以放入 CSS 變量。

--foo: if(x > 5) this.width=10;

上面代碼中，--foo的值在 CSS 里面是無(wú)效語(yǔ)句，但是可以被 JavaScript 讀取。這意味著，可以把樣式設(shè)置寫(xiě)在 CSS 變量中，讓 JavaScript 讀取。

所以，CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑。

八、參考鏈接

• Winning with CSS Variables | hey it's violet
• CSS Variables: Why Should You Care? https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care
• It's Time To Start Using CSS Custom Properties https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
• Why I'm Excited About Native CSS Variables https://philipwalton.com/articles/why-im-excited-about-native-css-variables/

原文地址：《CSS 變量教程》 作者： 阮一峰 日期： 2017年5月 9日 https://www.ruanyifeng.com/blog/2017/05/css-variables.html