less基础入门文档

1.变量

可以进行变量插补，引入声明，属性声明

//引入声明
@title: "../../src/title";
@import "@{title}/title.less"
//变量插补
@my-select: div;
@{my-select} {
	font-size: 30px;
	margin: 10px;
}
//属性
@property: color;
.wid{
	@{property}: #ddd;
	background-@{property}: #dd
}

懒加载，

因为块级作用域的方式，先读取当前块中的数值，再读取下一个块中的数值。

两次定义变量时，使用变量的最后定义，从当前作用域向上搜索。这类似于css本身，其中css定义中的最后一个属性用于确定值

.lazy-load {
	width: @var;
	@a:9%
}
@var: @a;
@a: 100%
//css
.lazy-load {
	width: 9%
}

当属性作为变量时，运用操作符为$

.widget {
  color: #efefef;
  background-color: $color;
}
//css
.widget {
	color: #efefef;
	background-color: #efefef;
}

2.父母选择器

操作符&，为当前的父属性

用＆引用父选择器 ＆运算符表示嵌套规则的父选择器，在将修改类或伪类应用于现有选择器时最常用

＆在选择器中可能会出现多次。这使得可以重复引用父选择器而无需重复其名称。

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}
//css
.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

&可以反向操作

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}
//css
.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}

组合技

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}
//css
p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}

3.extend

extend拓展语法

.a:extend(.b) {} 
//等效于
.a {
	&:extend(.b);
}

.c:extend(.d all) {} //扩展了.d的所有实例例如.x.d或者.d.x
.c:extend(.d) {} //仅仅扩展了.d

.e:extend(.f){}
.e:extend(,g){}
//等同于
.e:extend(.f, .g){}

extend拓展附加到选择器中

附加到选择器的扩展看起来像一个普通的伪类，带有选择器作为参数。一个选择器可以包含多个extend子句，但是所有扩展都必须在选择器的末尾。

//使用:nth-child的时候要
.demo:extend(:nth-child(3))//这样在extend中添加伪类元素

//使用:hover的时候则是
.demo:hover:extend(.mmm)

//在选择器之后扩展
pre:hover:extend(div pre)

//选择器和扩展之间允许有空格
pre:hover:extend(div pre)

//允许多个扩展
pre:hover:extend(div pre):extend(.bucket tr)
//-注意，这和底下的相同 
pre：hover:extend(div pre，.bucket tr)

//这是不允许的
pre:hover:extend(div pre).nth-child(odd)。extend扩展必须是最后一个。

&:extend操作

:extend伪类就类似于继承效果，会将后面的参数属性进行继承

div{
	color: red
	&:extend(.header)
}
.header{
	background-color:blue
}
//css
.header,div{
	background-color: blue
}
div{
	color: red
}

精确匹配与扩展

默认情况下，extend查找选择器之间的完全匹配。选择器是否使用前导星并不重要。两个nth表达式具有相同的含义并不重要，它们必须具有相同的形式才能匹配。唯一的例外是属性选择器中的引号，很少知道它们的含义相同并匹配它们

//如有选择器*.和.是等效的，但是extend不会全部匹配
*.class {
	color: blue;
}
.class {
	font-size:10px;
}
.noStar:extend(.class) {
	color: red;
} //这将不会匹配*.class选择器
编译后
.noStar{
	color:red;
	font-size:10px
}

顺序也很重要，extend也会根据不同顺序进行匹配

.demo:hover:visited {
	color: blue;
}
.demo:visited:hover {
	color: red
}
.selector:extend(.demo:visited:hover){}
编译后
.selector{
	color:red
}

extend中存在all关键字时

当扩展参数中最后指定all关键字时，它告诉less将该选择器作为另一个选择器的一部分进行匹配。将复制选择器，然后仅将选择器的匹配部分替换为扩展名，从而创建一个新的选择器。

.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {}
编译后
.a.b.replacement,
.replacement.c {
  color: orange;
}
.replacement:hover {
  color: green;
}

这是一个无损的搜索和替换

extend中使用选择器插值

extend无法将选择器与变量匹配。如果选择器包含变量，则extend将忽略它。但extend可以附加到插值选择器,具有变量的选择器将不匹配.

@variable: .bucket;
@{variable} { // 内插选择器
  color: blue;
}
.some-class:extend(.bucket) {} //没有找到匹配项
---------------------------------------------------
.bucket {
  color: blue;
}
.some-class:extend(@{variable}) {} // 插值选择器不匹配
@variable: .bucket;
---------------------------------------------------
都编译为
.bucket {
	color: blue;
}

在@media中使用extend

@media声明中的:extend仅匹配同一媒体声明中的选择器

注意，extend和嵌套中@media声明里的选择器不匹配

顶级扩展匹配所有内容，包括嵌套媒体中的选择器

@media print {
  .screenClass:extend(.selector) {} 
  .selector { 
    color: black;
  }
}
.selector { 
  color: red;
}
编译后
@media print {
  .selector,
  .screenClass {
    color: black;
  }
}
.selector { 
  color: red;
}
---------------------------------------------
@media screen {
  .screenClass:extend(.selector) {} 
  @media (min-width: 1023px) {
    .selector { 
      color: blue;
    }
  }
}
编译后
@media screen and (min-width: 1023px) {
  .selector {
    color: blue;
  }
}
-----------------------------------------------
@media screen {
  .selector {  
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {  
      color: blue;
    }
  }
}
.topLevel:extend(.selector) {}
编译后
@media screen {
  .selector,
  .topLevel { 
    color: blue;
  }
}
@media screen and (min-width: 1023px) {
  .selector,
  .topLevel { 
    color: blue;
  }
}

4.merge

transform+_代表空格

类加上()不是类名，是方法

.mixin(){
	transform+_: scale(2)
}
.myclass {
	.mixin();
	transform+_: rotate(15deg);
}
//css
.myclass{
	transform: scale(2) rotate(15deg)
}

5.mixins

参数混入

如果要创建一个mixin，但又不希望该mixin出现在CSS输出中，请在mixin定义后加上括号。

.test{
	color: red;
}
.test-other-mixin() {
	background: white;
}
.class {
	.test();
	.test-other-mixin()
}
编译后
.test{
	color: red;
}
.class {
	color: red;
	background: white;
}
-----------------------------
.box-width(@width: 40px) {
	width: @width
}
//css
.box-width {
	width:40px
}

mixins中的选择器

mixins还可以选择选择器

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}
编译后
button:hover {
	border: 1px solid red;
}

命名空间

如果要在更复杂的选择器中混合属性，则可以堆叠多个ID或类

#outer() {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner();
}
//编译后
#outer > .inner();
#outer .inner();
#outer.inner();
--------------------------
//如果想减少命名间隔与其他库混合或用户混合的冲突，
#my-library {
  .my-mixin() {
    color: black;
  }
}
// 它可以这么使用
.class {
  #my-library.my-mixin();
}

具有保护性质的命名空间

如果名称空间具有保护，则仅当保护条件返回true时，才使用由其定义的混合。命名空间防护的评估方式与Mixin的防护方式完全相同，因此以下两个Mixin的工作方式相同

#namespace when (@mode = huge) {
  .mixin() { /* */ }
}

#namespace {
  .mixin() when (@mode = huge) { /* */ }
}

假定所有嵌套名称空间和mixin的默认函数都具有相同的值。永远不会评估以下mixin，因此保证其警惕之一是错误的：

#sp_1 when (default()) {
  #sp_2 when (default()) {
    .mixin() when not(default()) { /* */ }
  }
}

支持关键字!important混入

在mixin调用之后使用！important关键字将其继承的所有属性标记为！important

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}
编译后
.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

选择器混入

.demo(){
	&:hover {
		color: red
	}
}
botton {
	.demo()
}
//css
button:hover {
	color: red
}

多参数混入

会进行参数匹配，以及自动筛选，对应参数才会添加进去

.demo(@color){
	color-1: @color;
}
.demo(@color; @padding: 2){
	color-2: @color;
	padding-2: @padding;
}
.demo(@color; @padding; @margin: 2){
	color-3: @color;
	padding-3: @padding;
	margin: margin;
}
.some div {
	.demo(#fffffff)
}
//compiles into
.some div {
	color-1:#ffffff;
	color-2:#ffffff;
	padding-2: 2;
}

将mixins当作函数使用

​ 用()传参用[]包裹其中的子方法

.average(@x, @y) {
  @result: ((@x + @y) / 2);
}

div {
  // call a mixin and look up its "@result" value
  padding: .average(16px, 50px)[@result];
}
//css
div{
	padding: 33px
}
//
@dr: {
	value: foo;
}
.box {
	my-value: @dr[];
}
//css
.box {
	my-value: foo;
}
//
.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //nested mixin was copied here and is usable
}
//css
#namespace {
	declaration: 5;
}

使用递归的mixins

​ 创建循环

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}
//css 
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

指定区间

可以使用mixins进行指定区间的操作

.mixin(@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin(@a) {
  color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
//css
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

当使用when的时候就会进入循环，使用and关键字或者符号,用来连接条件，类似于并操作,用not关键字用来取消条件类似于非操作

.mixin(@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin(@a) when (@a > 10), (@a < -10) { ... }
.mixin(@b) when not (@b > 0) { ... }

.mixin(@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin(@a) {
  color: @a;
}

6.function的使用

逻辑性函数

if

可以根据条件返回两个值之一

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}
编译后
div {
    margin: 0;
    color:  black;
}

boolean

评估为真或假 ，可以“存储”一个布尔测试以供以后在Guard或if()中进行评估

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

div {
  background: @bg; 
  color: if(@bg-light, black, white);
}
编译后
div {
  background: black;
  color: white;
}

字符串函数

escape

将URL编码应用于输入字符串中找到的特殊字符

escape('a=1')
编译后
a%3D1

注意：如果参数不是字符串，则未定义输出。当前实现在颜色上返回undefined，在任何其他类型的参数上返回不变的输入。这个行为将不会被依赖，而且将来会被改变

e

字符串转义

@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
filter: e(@mscode);
编译后:
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

% format

函数％（string，arguments …）格式化字符串

第一个参数是带有占位符的字符串。所有占位符以百分比符号％开头，后跟字母s，S，d，D，a或A。其余参数包含用于替换占位符的表达式。如果您需要打印百分比符号，请再加上一个百分比%%。 如果需要将特殊字符转义为utf-8转义码，请使用大写占位符。该函数转义除（）’〜！之外的所有特殊字符。空格编码为％20。小写的占位符保留原样的特殊字符

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
编译后
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";

replace

替换字符串中的文本。

参数:

• string:要搜索和替换的字符串
• pattern: 要搜索的字符串或正则表达式模式
• replacement: 用于替换匹配模式的字符串。
• flags:（可选）正则表达式标志。

返回值:具有替换值的字符串

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
编译后
"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;

列表函数

length

返回值列表中的元素数。

参数值

• list - 用逗号或空格分隔的值列表。

如: length(1px solid #0080ff);

输出: 3

例子:

@list: "banana", "tomato", "potato", "peach";
n: length(@list);
编译后
n:4;

extract

返回列表中指定位置的值。

参数

• list - 用逗号或空格分隔的值列表。
• index -一个整数，用于返回指定数字在该列表中的位置。

@list: apple, pear, coconut, orange;
value: extract(@list, 3);
编译后
value: coconut;

range

生成跨越一系列值的列表

参数值

• start - （可选）起始值，例如1或1px
• end - 最终值，如5，5px
• step - （可选）要增加的数

value: range(4);
编译后
value: 1 2 3 4;

范围内每个值的输出将与最终值相同。例如：

value: range(10px, 30px, 10);
编译后
value: 10px 20px 30px;

each

将规则集的评估绑定到列表的每个成员。

参数值

• list - 用逗号或空格分隔的值列表。
• rules - 可以使用匿名混合集或者mixin

Example:

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});
编译后
.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

默认情况下，每个列表集的每个规则集都绑定到@ value，@ key和@index变量。对于大多数列表，将为@key和@index分配相同的值（数字位置，从1开始）。但也可以将规则集本身用作结构化列表。如:

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}
编译后
.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}

当然，我们可以为每个规则集调用使用守卫来调用带有mixin的mixin，因此这使each（）成为非常强大的功能。

在 each()中设置变量名

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}
编译后
.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}

each（）函数将采用匿名mixin中定义的变量名，并将它们按此顺序绑定到@ value，@ key和@index值。如果只写每个(@list,#(@value){})，则不会定义@key和@index。

使用range和each创建一个for循环

我们可以简单地通过生成数字列表并使用每个数字列表将其扩展为规则集来模拟for循环

each(range(4), {
  .col-@{value} {
    height: (@value * 50px);
  }
});
编译后
.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}

数学函数

和平时使用的math函数差不多，不做详细介绍，只介绍其作用

ceil

向上舍入到下一个最大整数。

ceil(2.4) 输出：3

floor

向下舍入到下一个最小整数。

floor(2.6)输出: 2

percentage

将浮点数转换为百分比字符串。

percentage(0.5)输出: 50%

round

四舍五入，有2个参数，第二个参数为要舍入的小数位数，默认为0

round(1.67)输出: 2

round(1.67, 1)输出: 1.7

sqrt

计算数字的平方根。保持单位不变。

sqrt(25cm)输出:5cm

sqrt(18.6%)输出4.312771730569565%;

abs

计算数字的绝对值。保持单位不变。

sin

正弦函数

asin

反正弦函数

cos

余弦函数

acos

反余弦函数

tan

正切函数

atan

反正切函数

pi

返回数学中的π (pi);

使用pi()

pow

pow(x,y)x的y次方，会保留计量单位

mod

求余函数mod(x,y)保留第一个参数的计量单位

min

返回集合中的最小值

max

返回集合中的最大值

类型判断函数

isstring是否是string类型

isnumber 是否是number类型

iscolor 是否是colorl类型，如red,#ffff等

iskeyword 如果值是关键字，则返回true，否则返回false。

isurl如果值是url，则返回true，否则返回false。

ispixel 如果值是以像素为单位的数字，则返回true，否则返回false。

isem 如果值是以em为单位的数字，则返回true，否则返回false。

ispercentage 如果值是百分比值，则返回true，否则返回false。

isunit 如果值是以指定单位为数字，则返回true，否则返回false

isruleset 如果值是规则集，则返回true，否则返回false。

杂项函数

color

解析颜色，输出代表颜色的字符串。

color("#aaa");输出: #aaa

image-size

从文件获取图像尺寸。

image-size("file.png");输出: 10px 10px

注意：此功能需要在每个环境中实现。当前仅在节点环境中可用。

image-width

从文件获取图像宽度

image-width("file.png");输出: 10px

注意：此功能需要在每个环境中实现。当前仅在节点环境中可用。

image-height

从文件获取图像长度。

image-height("file.png");输出: 10px

注意：此功能需要在每个环境中实现。当前仅在节点环境中可用。

convert

将数字从一个单位转换为另一个单位。

第一个参数包含一个带单位的数字，第二个参数包含一个单位。如果设备兼容，则将转换数字。如果它们不兼容，则第一个参数将原样返回。

兼容的单位组:

• 长度: m, cm, mm, in, pt, pc,
• 时间: s ,ms,
• 角度: rad, deg, grad ,turn.

参数:

• number: 带单位的浮点数.
• identifier, string escaped value: 单位

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types
编译后
9000ms
140mm
8

default

仅在警戒条件内可用，并且仅在没有其他混合匹配时返回true，否则返回false。

.mixin(1)                   {x: 11}
.mixin(2)                   {y: 22}
.mixin(@x) when (default()) {z: @x}

div {
  .mixin(3);
}

div.special {
  .mixin(1);
}
编译后
div {
  z: 3;
}
div.special {
  x: 11;
}

可以将默认返回的值和 default 一起操作. 例如.mixin() when not(default()) {} 将会匹配，除非至少还有一个mixin定义与.mixin()调用匹配 :

.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}

div-1 {
  .mixin(100px);
}

div-2 {
  /* ... */
  .mixin(100%);
}
编译后
div-1 {
  width: 100px;
  padding: 20px;
}
div-2 {
  /* ... */
}

允许在相同保护条件下或在具有相同名称的mixins的不同条件下进行多个default（）调用：

div {
  .m(@x) when (default()), not(default())    {always: @x}
  .m(@x) when (default()) and not(default()) {never:  @x}

  .m(1); // OK
}
但是，如果Less使用default（）检测到多个mixin定义之间可能存在冲突，则将引发错误：
编译后
div {
  .m(@x) when (default())    {}
  .m(@x) when not(default()) {}

  .m(1); // Error
}

在上面的示例中，无法确定每个default（）调用应返回什么值，因为它们相互依赖。

高级多个 default() 用法:

.x {
  .m(red)                                    {case-1: darkred}
  .m(blue)                                   {case-2: darkblue}
  .m(@x) when (iscolor(@x)) and (default())  {default-color: @x}
  .m('foo')                                  {case-1: I am 'foo'}
  .m('bar')                                  {case-2: I am 'bar'}
  .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}

  &-blue  {.m(blue)}
  &-green {.m(green)}
  &-foo   {.m('foo')}
  &-baz   {.m('baz')}
}
编译后
.x-blue {
  case-2: #00008b;
}
.x-green {
  default-color: #008000;
}
.x-foo {
  case-1: I am 'foo';
}
.x-baz {
  default-string: and I am the default;
}

仅在保护表达式内部，默认函数可以作为Less内置函数使用。如果在mixin保护条件之外使用，它将被解释为常规CSS值：

div {
  foo: default();
  bar: default(42);
}
编译后
div {
  foo: default();
  bar: default(42);
}

unit

修改参数的计量单位

当只有一个参数时候，默认去除该参数的计量单位

unit(5, px)输出: 5px

unit(5em)输出: 5

get-unit

返回数字的计量单位

如果参数包含带单位的数字，则该函数返回其单位。不带单位的参数将导致返回一个空值。Parameters:

• number: 有或没有单位的数字

get-unit(5px)输出: px

get-unit(5)输出: //nothing

svg-gradient

生成多级svg渐变

SVG梯度函数生成多级SVG梯度。它必须至少具有三个参数。第一个参数指定渐变类型和方向，其余参数列出颜色及其位置。第一种和最后一种指定颜色的位置是可选的，其余颜色必须具有指定的位置。

方向必须是以下位置之一：从下至右，从右下至右上，在中心为椭圆或椭圆。方向可以指定为转义值〜'tobottom’和空格分隔的单词列表。

方向上必须跟随两个或多个色标。既可以在列表中提供它们，也可以在单独的参数中指定每种颜色的色标。

div {
  @list: red, green 30%, blue;
  background-image: svg-gradient(to right, @list);
}

等同于:

div {
  background-image: svg-gradient(to right, red, green 30%, blue);
}

两者编译后都是

div {
  background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0000%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23008000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
}

Note: in versions before 2.2.0 the result is base64 encoded .

生成的背景图片左侧为红色，其宽度为30％为绿色，并以蓝色结尾。 Base64编码的部分包含以下svg-gradient：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ff0000"/>
        <stop offset="30%" stop-color="#008000"/>
        <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#gradient)" />
</svg>