Question

我有一个LESS Mixin定义如下，以获得渐变背景

.gradient ()
{
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: -moz-linear-gradient(top,  rgba(245,246,246,0) 0%, rgba(236,237,239,0) 10%, rgba(219,220,226,0.22) 30%, rgba(184,186,198,0.5) 55%, rgba(221,223,227,0.78) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,0)), color-stop(10%,rgba(236,237,239,0)), color-stop(30%,rgba(219,220,226,0.22)), color-stop(55%,rgba(184,186,198,0.5)), color-stop(80%,rgba(221,223,227,0.78)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-8 */
}

我需要能够调用此Mixin传递一个参数，该参数可以保持颜色停止但是应用不同的渐变方向，以获得类似这样的内容（在CSS代码中）：

  background: linear-gradient(135deg, rgba(245,246,246,0), rgba(236,237,239,0) );

如何设置Mixin才能达到此结果？谢谢

Answer 1

要将mixin与参数一起使用，请添加以@开头的参数，逗号分隔在mixinname之后的（）之间。 mixin(@paramter1:defaultvalue, @paramter2:defaultvalue)。

所以在你的情况下：

.gradient (@degrees:0)
{
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: -moz-linear-gradient(@degrees,  rgba(245,246,246,0) 0%, rgba(236,237,239,0) 10%, rgba(219,220,226,0.22) 30%, rgba(184,186,198,0.5) 55%, rgba(221,223,227,0.78) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,0)), color-stop(10%,rgba(236,237,239,0)), color-stop(30%,rgba(219,220,226,0.22)), color-stop(55%,rgba(184,186,198,0.5)), color-stop(80%,rgba(221,223,227,0.78)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(@degrees,  rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(@degrees,  rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(@degrees,  rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
  background: linear-gradient((@degrees - 90deg),  rgba(245,246,246,0) 0%,rgba(236,237,239,0) 10%,rgba(219,220,226,0.22) 30%,rgba(184,186,198,0.5) 55%,rgba(221,223,227,0.78) 80%,rgba(245,246,246,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-8 */
}

@ second link似乎对纠正我在background: linear-gradient((@degrees - 90deg)使用的度数非常有用。

旧-webkit-gradient()不支持学位（AFAIK，请参阅：https://www.webkit.org/blog/175/introducing-css-gradients/），而filter也不支持。{/ p>

LESS：对Mixin中定义的渐变应用不同的方向

1 个答案: