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">

全部渐变色

总结

说实话，这样的插件我都不想写总结，也没啥总结的，感觉应用场景基本没有，自己练习还行。

而且最接受不了的就是颜色用中文命名，这么多谁记得住。

当之无愧最废的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