分享一款史上最沒用的CSS庫chinese-grad

分享一款史上最沒用的CSS庫chinese-gradient

hinese-gradient是一款利用CSS自定義屬性來制作的中文漸變色CSS庫，由于各式各樣、五彩斑斕的漸變色千變萬化，再加上許多英文過于抽象十分難記，于是就有了這款中文屬性庫。

該庫使用方式也是十分的簡單，只需要把你原來寫的 background: xxx; 替換為 background: var(--xxx); 即可。

如：

以前：background: blue;

現在：background: var(--湖藍);

安裝

要記得先引入這個庫才能夠去正常的使用。如果你的項目是一個工程化的項目，那么：

npm i chinese-gradient

記得要在主文件中引入：

import 'chinese-gradient'

同時也支持sass、less等，如:

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

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

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

全部漸變色

background: var(--胭脂紅);

background: var(--寶石藍);

background: var(--天藍);

background: var(--深海藍);

background: var(--火紅);

background: var(--極光綠);

background: var(--熒光綠);

background: var(--雅紫);

background: var(--米白);

background: var(--紫紅);

background: var(--暗綠);

background: var(--紫灰);

background: var(--芒果黃);

background: var(--靛藍);

background: var(--霾灰);

background: var(--軍綠);

background: var(--黛藍);

background: var(--櫻花粉);

background: var(--芭比粉);

background: var(--墨色);

background: var(--胭脂粉);

background: var(--牽牛花);

background: var(--紅海);

background: var(--湖藍);

background: var(--黃河);

background: var(--香檳金);

background: var(--怦然心動);

background: var(--青出于藍);

background: var(--燈紅酒綠);

background: var(--夏日繽紛);

background: var(--半熟香蕉);

總結

說實話，這樣的插件我都不想寫總結，也沒啥總結的，感覺應用場景基本沒有，自己練習還行。

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

當之無愧最廢的CSS插件！

載說明：原創不易，未經授權，謝絕任何形式的轉載

今天看了一篇國外的大佬關于“css嵌套語法”看法的文章，他認為這個語法是完全無用的垃圾，并收到眾多網友的支持，在這里我將這個國外大佬的看法進行了整理，歡迎大家在評論區探討。

國外大佬的看法

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

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

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

    >.awesome {
            color: deeppink;
        }
    }
}

當你依賴制表符來保持事情的整潔時，必須不停地查找代碼中實際應用的選擇器/組合器規則...那么優勢在哪里呢？

而且，如果你進入像實際的完整代碼庫這樣的東西，它真的會崩潰。每個選擇器字符串使用一個屬性是堆疊的。現實世界中？即使是像菜單這樣的小東西：

#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);
   }
   
  }
  
 }
 
}

當你理解偽狀態時，如果沒有試圖在代碼中找到那些內部的錨點而不是在整個代碼并嘗試弄清楚所有的縮進，你怎么知道它們在哪里？那不是清晰的代碼！

相比之下：

#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);
}

這是一千倍更清晰的代碼，因為你不必去尋找父選擇器是什么！每個屬性和值的組合都有完整的聲明，說明它在哪里、是什么和如何應用的！規則越大，越多，就越是如此！

極簡主義和字節癡迷之間有一種區別...后者聞起來像是“哇哇眼睛不想打字”的味道，這種情況下，也許應該考慮一下你是不是從事錯誤的業務。

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

這就像他們在尋找LESS / SASS / SCSS這樣的垃圾，以及為什么人們會尋找HTML / CSS框架的1997年實踐的紀念碑一樣。這表明他們對HTML的最基本用法以及CSS與HTML的區別一無所知。

它肯定不會提高代碼的清晰度。

關于我的看法

以上是這位大佬的看法，以下是我對這個問題的看法，歡迎大家來探討關于“css嵌套語法”的問題。

我認為這個問題并不是非黑即白的。CSS嵌套語法可以使代碼更具可讀性和易維護性，但如果過度使用，也可能會導致代碼的冗長和可讀性下降。

對于大多數項目來說，選擇使用CSS嵌套語法還是不使用，應該取決于具體情況。在某些情況下，使用CSS嵌套語法可以使代碼更加簡潔和易于理解，而在其他情況下，使用它可能不那么合適。

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

1. 項目規模和復雜度：如果項目規模較小且樣式較簡單，使用CSS嵌套語法可能會增加代碼的冗長和復雜度，反而降低了代碼的可讀性。但是，對于大型項目和復雜樣式，使用CSS嵌套語法可以使代碼更加結構化和易于管理。

2. 開發團隊的技能水平：如果開發團隊中的成員都熟悉CSS嵌套語法并且能夠正確使用它，那么使用它可能會使開發更加高效。但是，如果團隊中的成員不熟悉CSS嵌套語法或者誤用它，那么可能會導致代碼的錯誤和混亂。

3. 個人喜好和項目要求：有些開發人員喜歡使用CSS嵌套語法，因為它可以使代碼更加優雅和易于閱讀。但是，有些項目可能對代碼的性能和可維護性有更高的要求，此時可以考慮不使用CSS嵌套語法。

總之，選擇是否使用CSS嵌套語法應該根據項目的實際需求和開發團隊的技術水平來決定。如果正確使用，它可以使代碼更加優雅和易于維護，但是過度使用可能會導致代碼的冗長和可讀性下降。我們應該根據項目的實際需求和具體情況進行權衡和取舍，而不是一味地認為某種方法是完全無用的垃圾。

結束

由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。

篇文章是阮一峰老師發表于2017年（《CSS 變量教程 - 阮一峰的網絡日志），雖然以及過去6年有余，但至今讀來依然非常棒，今天搜索一個css變量相關的知識再次讀到，分享在這里，大家一起學習下，也推薦大家經常去讀一讀阮老師的分享！

一、變量的聲明

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


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

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

它們與color、font-size等正式屬性沒有什么不同，只是沒有默認含義。所以 CSS 變量（CSS variable）又叫做"CSS 自定義屬性"（CSS custom properties）。因為變量與自定義的 CSS 屬性其實是一回事。

你可能會問，為什么選擇兩根連詞線（--）表示變量？因為$foo被 Sass 用掉了，@foo被 Less 用掉了。為了不產生沖突，官方的 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);
}

變量名大小寫敏感，--header-color和--Header-Color是兩個不同變量。

二、var() 函數

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

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

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

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

第二個參數不處理內部的逗號或空格，都視作參數的一部分。

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

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

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

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

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

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

三、變量值的類型

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

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

利用這一點，可以 debug（例子）。

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

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

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

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

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

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

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

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

四、作用域

同一個 CSS 變量，可以在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效。這與 CSS 的"層疊"（cascade）規則是一致的。

下面是一個例子。

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

<p>藍色</p>
<div>綠色</div>
<div id="alert">紅色</div>

上面代碼中，三個選擇器都聲明了--color變量。不同元素讀取這個變量的時候，會采用優先級最高的規則，因此三段文字的顏色是不一樣的。

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

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

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

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

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

五、響應式布局

CSS 是動態的，頁面的任何變化，都會導致采用的規則變化。

利用這個特點，可以在響應式布局的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;
  }
}

六、兼容性處理

對于不支持 CSS 變量的瀏覽器，可以采用下面的寫法。

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

也可以使用@support命令進行檢測。

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

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

七、JavaScript 操作

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

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

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

JavaScript 操作 CSS 變量的寫法如下。

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

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

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

這意味著，JavaScript 可以將任意值存入樣式表。下面是一個監聽事件的例子，事件信息被存入 CSS 變量。

const docStyle=document.documentElement.style;

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

那些對 CSS 無用的信息，也可以放入 CSS 變量。

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

上面代碼中，--foo的值在 CSS 里面是無效語句，但是可以被 JavaScript 讀取。這意味著，可以把樣式設置寫在 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

在線咨詢

上一篇：最近熱議的ERC404協議是什么，ERC404協議開
下一篇：To Do for Mac(微軟待辦事項軟件)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商