Question

在下面的css代码中，

@import "compass/css3";

.navigation a:hover {
  background: darken(deepskyblue, 2%);
}

 .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
  }

darken()和rgba()显示类似语法的功能。

这些功能或预处理器宏吗？在运行这些功能之前是否需要进行预先安装？

注意：CSS初学者

Answer 1

两者兼得：

rgba()是native CSS3 function，它采用以下参数：

rgba(<red>, <green>, <blue>, <alpha>)

但是，您所看到的是Sass，一个提供additional colour manipulation controls的CSS预处理器。 darken()是一种Sass原生方法，它将根据输入颜色和变暗量（以百分比形式给出）返回十六进制代码颜色。

虽然Sass中的rgba()可以与原生CSS函数完全相同的方式工作，但它也会处理十六进制颜色，例如：

rgba(#000, 0.5) // Compiles to rgba(0, 0, 0, 0.5)

在实践中，这是非常有用的，因为颜色通常作为十六进制值提供，并通过描述语义的变量进行抽象，例如：

.error-box {
  background-color: rgba($color-error, 0.2);
  color: darken($color-error, 10%);
}

样式选择的意图更清晰，它们将在编译的CSS中。

Answer 2

这不是css的一部分，而是css预处理器，如LESS或SASS。

在这种情况下，它（使用compass/css3时所见）：http://sass-lang.com/documentation/Sass/Script/Functions.html

Answer 3

这是LESS（或SASS，如前所述）预处理器语法。 darken生成并返回提供颜色的较暗版本，rgba返回颜色，由四个组件（显然是r，g，b，a）构建。

Answer 4

这实际上是LESS功能LESS进一步详情请点击链接。

darken(hsl(90, 80%, 50%), 20%)

对于RGBA，它是CSS3`＃p1 {background-color：rgba（255,0,0,0.3）;} / * red with opacity * /

'darken（）'和'rgba（）'，这些函数在css中吗？

4 个答案: