学习less;

less是什么，用途，怎么用，使用中的问题，注意事项，

1.LESS是一种由Alexis Sellier设计的动态层叠样式表语言。第一个版本由Ruby写，逐渐被替换为JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino).

2.LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件.

3.LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

意义：
    改变传统样式的编写方式，以面向对象的方式编写，提高开发效率.

怎么用:

    在服务器端，如Node.js，我们有专门的less编译模块。如果是在客户端，需要从LESS官网下载less.js文件，然后在HTML页面中引入.？？？

   CDN   (内容分发网络,其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度，减少服务器的压力。CDN最常用的用途是用来给终端用户发布静态文件，如图片、java脚本、css文件等。请注意，该服务仅仅用于处理静态文件，如主要的网站页面，所有动态内容，都是由主网站服务器提供。这通常是分开处理的，通过不同的子域名进行处理，如images.mydomain.com，与www.是分开的。)

 <script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

注意事项：

    在浏览器中使用less.js开发是很好的，但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中？？？，对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。（使用Grunt插件，实现一个简单的Web服务器，同时有一个文件监听功能，监听less文      件的修改，然后将修改的Less实时编译为CSS。）

一、定义变量：@150px;@color:#f5f5f5;把重复用到的写成变量，注意只能定义一次，本质是常量；

                   @bgcolor:#000;@hoverbgcolor:dark(@bgcolor,10%);

Less中的变量有以下规则：

  1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
  2. 没有先定义后使用的规定；
  3. 以最后定义的值为最终值；
  4. 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；？？？ 
    用于 选择器部件，必须使用"@{变量名}" 的形式
  5. 定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
  6. 存在作用域，局部作用域优先级高于全局作用域；
  •   列表类型

    less变量除了支持#FFF，12px，12，test等单值类型外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数

@colors: #FFF, #0F0, #F0F;
.skin{
  color: extract(@colors, 0);
  height: 12px * length(@colors);
}
-------------------------------------------
.skin{ color: #FFF; height: 36px; }

  3. 嵌套(Nested)

  4. 父选择器引用(ParentSelector)

  1. 采用&引用完整的父选择器
  2. 可通过追加和预追加的方式加工&，从而生成新的选择器
  3. 通过&::after等方式添加伪元素、伪类样式规则集合
  4. 同一个选择器可使用多个&
  5. 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
  6. &指向组选择器时，会生成新的组选择器

　　Less源码：

复制代码
 /* 
  * 采用&引用完整的父选择器
  * 可通过追加和预追加的方式加工&，从而生成新的选择器
  * 通过&::after等方式添加伪元素样式规则集合
  * 同一个选择器可使用多个&
  * 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
  */
@bg: #aaa;
#ps1 .btn{
　　background-color: @bg;
   border-radius: 5px;
   &:hover{
   　　background-color: lighten(@bg, 30%);
      cursor: pointer;
   }
   &-msg, &-eof{
   　　color: blue;
   }
   .no-borderradius &{
   　　background-image: url('img/btn-bg.png');
   }
}
/*
 * &指向组选择器时，会生成新的组选择器
 */
#dummy1, .dummy1{
　　&:hover{
   　　color: red;
    }
   & + &{
   　　font-size: 12px;
   }
}
复制代码-----------------------------------------------------------------------------------------
#ps1 .btn {
  background-color: #aaaaaa;
  border-radius: 5px;
}
#ps1 .btn:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}
#ps1 .btn-msg,
#ps1 .btn-eof {
  color: blue;
}
.no-borderradius #ps1 .btn {
  background-image: url('img/btn-bg.png');
}
/*
 * &指向组选择器时，会生成新的组选择器
 */
#dummy1:hover,
.dummy1:hover {
  color: red;
}
#dummy1 + #dummy1,
#dummy1 + .dummy1,
.dummy1 + #dummy1,
.dummy1 + .dummy1 {
  font-size: 12px;
}

      最终输出：

5. 导入指令(Import)

  less样式文件可通过 @import '文件路径'; 引入外部的less文件。

  注意：

  1. 不带扩展名或带非.less的扩展名均被视为less文件;
  2. @import可出现在任何位置，而不像css的@import那样只能放在文件第一行。

     另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple)，用来改变引入文件的特性。语法为：  @import (reference)'文件路径'; 。下面为各配置项的具体说明：

    1. @import (reference) "文件路径"; 
    　　将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
    2. @import (inline) "文件路径"; 
    　　用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。
         注意：引入的文件和当前文件会被编译为一个样式样式
    3. @import (less) "文件路径"; 
    　　默认使用该配置项，表示引入的文件为less文件。
    4. @import (css) "文件路径"; 
    　　表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件
    引入CSS的方法有两种，一种是@import，一种是link 
    @import url('地址');
    <link href="地址" rel="stylesheet" type="text/css" />
    现在绝大部分的网站都采用后一种link方式，原因在于
    @import先加载HTML，后加载CSS
    link先加载CSS，后加载HTML。

    所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。
    5. @import (once) "文件路径"; 
    　　默认使用该配置项，表示对同一个资源仅引入一次。
    6. @import (multiple) "文件路径"; 
    　　表示对同一资源可引入多次。？？？引入多次干嘛？？

      6. 继承(Extend)

      有两种语法形式， <selector>:extend(<parentSelector>){} 和 <selector>{ &:extend(<parentSelector>); } 

       Less源码：

    复制代码继承一个类，有公共的属性方法
    .animal{
　　color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear:extend(.animal){
　　 100px;
　　height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer{
　　&:extend(.animal);
　　 50px;
　　height: 50px;
}
    复制代码

       最终输出：

    复制代码
    .animal,
.bear,
.deer {
  color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear {
   100px;
  height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer {
   50px;
  height: 50px;
}
    复制代码

    注意事项：

      6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。
      Less源码：
    复制代码all使用继承后就杀掉了.parent，有什么用？？？
    *.parent{
　　height: 100px;
   .hair{
   　　color: #f27;
   }
   [name=eyes]{
   　　color: #768;
   }
}
// 匹配失败
.son:extend(.parent){}
.son:extend(.hair){}
          
// 匹配成功
.son:extend(*.parent [name='eyes']){}
.son:extend(*.parent [name="eyes"]){}
// all关键字会匹配所有包含parentSelector内容的选择器，并以selector替换parentSelector来生成新的选择器，parentSelector没有了。
// 下面的内容会生成 *.son，*.son .hair，*.son [name=eyes]三个新的选择器
.son:extend(.parent all){}
    复制代码

      最终输出：

    复制代码
    *.parent,
*.son {
  height: 100px;
}
*.parent .hair,
*.son .hair {
  color: #f27;
}
*.parent [name=eyes],
.son,
.son,
*.son [name=eyes] {
  color: #768;
}
    复制代码

     6.2. 父选择器不支持变量形式

     Less源码：

    复制代码
    @p1: .parent1;
@p2: .parent2;
.parent1{
　　height: 100px;
}
@{p2}{
　　height: 200px;
}
// 匹配失败
// 形式1，不支持以变量作入参
.son1:extend(@{p1}){}
// 形式2，不支持以变量作为选择器的规则集合
.son1:extend(.parent2){}
          
// 匹配成功
.son2:extend(.parent1){}
@s3: son3;
.@{s3}:extend(.parent1){}
    复制代码

      最终输出：

    复制代码
    .parent1,
.son2,
.son3 {
  height: 100px;
}
.parent2 {
  height: 200px;
}
    复制代码

    6.3. media query影响继承的作用域

    　　6.3.1. media query内的extend操作，仅能继承当前块的其他选择器样式。

          注意：不能extend当前media query块内部的子media query块中的选择器样式；但可以extend父media query块的选择器样式。

     　  Less源码：

    复制代码
    .parent1{
　　height: 200px;
}
@media screen{
　　.parent1{
　　　　height: 100px;
　　}    
   // 无法继承子media query块的选择器样式
   .son1:extend(.parent2){}
   @media (min- 1023px){
   　　// 继承父media query块的选择器样式
      .son2:extend(.parent1){}
      .parent2{
      　　 200px;
      }
   }
}
    复制代码

      　 最终输出：

    复制代码
    .parent1 {
  height: 200px;
}
@media screen {
  .parent1 {
    height: 100px;
  }
}
@media screen and (min- 1023px) {
  .parent2 {
     200px;
  }
}
    复制代码

    　　6.3.2. 非media query内的extend操作，将会继承所有media query中匹配的选择器样式。

     　　Less源码：

    复制代码
    @media screen{
　　.parent{
   　　height: 100px;
   }
   @media (min- 1023px){
   　　.parent{
       　　 200px;
       }
   }
}
.son:extend(.parent){}
    复制代码

    　　最终输出：

    复制代码
    @media screen {
  .parent,
  .son {
    height: 100px;
  }
}
@media screen and (min- 1023px) {
  .parent,
  .son {
     200px;
  }
}
    复制代码

    　6.4. 增强的mixin定义mixin时仅能使用类选择器和ID选择器，而extend操作可对应所有的选择器，因此当没有动态入参而又需要类选择器和ID选择器以外的选择器时，可使用extend来实现mixin的功能。？？？？

    7. 混合(Mixin)

    　　Mixin相当于macro，会将样式规则内联到调用的位置中。而Less中的mixin有以下的注意点：

    　　7.1. 类选择器、ID选择器自动被定义为mixin，而且具有命名空间；
    　　Less源码：
    复制代码
    .animal{
　　.human{
   　　#fsjohnhuang{
      　　.hair{
          　　color: #000;
          }
       }    
    }    
}    
.front-end-monkey{
　　// 或者.animal.human#fsjohnhuang.hair();
　　// 或者.animal>.human>#fsjohnhuang>.hair;
   // 或者.animal>.human>#fsjohnhuang>.hair();
   // 即可调用mixin
   .animal.human#fsjohnhuang.hair;
}
    复制代码

    　　最终输出：

    .animal .human #fsjohnhuang .hair {
  color: #000;
}
.front-end-monkey {
  color: #000;
}

    　　7.2. 显示定义不带参数和带参数的样式库(mixin库)，不会输出到最终输出中，仅供调用；

    　　Less源码：

    复制代码
    // 定义不带参数的mixin
.animal(){
　　color: #000;
}
// 定义带参数的mixin
// 注意：由于,和;均可用于作为参数分隔符，但由于如background、border等样式属性支持属性值组，而,则作为属性值组元素分隔符，因此推荐使用;作为参数分隔符
.dog(@type; @age){
　　height: @type * @age * 12px;
}
// 定义带参数默认值的mixin
.cat(@type; @age:1){
　　height: @type * @age * 5px;
}
          
// 调用才会出现在最终输出
.chihuahua{
　　.dog(1;2);
}
    复制代码

    　　最终输出：

    .chihuahua {
  height: 24px;
}

    　　7.3. mixin内置两个特殊的对象 @arguments 和 @reset 。@arguments代表mixin的所有入参,而@reset代表mixin的...入参数组。

    　　Less源码：

    复制代码@argument代表所有的，@reset代表剩下的，没有使用的参数，
    .dog(@type;@age;@rest...){
　　height: @type * @age * 12px;
　　border: @rest;
}
.cat(@solid;@w;@color){
　　border: @arguments;
}
          
.chihuahua{
　　.dog(1;2;solid;1px;red);    
}
.mimi{
　　.cat(solid;2px;blue);    
}
    复制代码

    　　最终输出：

    复制代码
    .chihuahua {
  height: 24px;
  border: solid 1px red;
}
.mimi {
  border: solid 2px blue;
}
    复制代码

    　　7.4. mixin的重载可定义多个同名mixin，调用时只要参数数量匹配则会执行相应的mixin。

    　　Less源码：

    复制代码
    .dog(@name){
　　&::after{
　　　　content: @name;
   }
}
.dog(@name;@age){
　　height: @age * 4px;
}
.dog(@name;@age;@20px){
　　height: @age * 12px;
　　 @width;
}
// 仅匹配到 .dog(@name){
.one-dog{
　　.dog('chihuahua');
}    
// 匹配到.dog(@name;@age) 和 .dog(@name;@age;@20px)
 .two-three-dog{
 　　.dog('two-three-dog', 2);
}
          
// 参数的模式匹配
// 当第一参数值为mimi时调用该mixin
.cat(mimi, @age){
　　height: @age * 22px;    
}
// 当第一参数值为mini时调用该mixin
.cat(mini, @age){
　　height: @age * 12px;    
}
// 不管第一参数值为啥均调用该mixin
.cat(@any, @age){
　　color: #f3c;
}
.mycat{
　　.cat(mini, 1);
}
    复制代码

    　　最终输出：

    复制代码
    .one-dog::after {
  content: 'chihuahua';
}
.two-three-dog {
  height: 8px;
  height: 24px;
   20px;
}
.mycat {
  height: 12px;
  color: #f3c;
}
    复制代码

     8. 选择、循环作业控制

         Less中通过混合（Mixin）后的when关键字来提供选择的作业控制，通过递归来实现循环的作业控制。

    　　Less源码：

    复制代码
    // 条件匹配
// true值匹配，仅实参为true时才匹配成功
.truth(@a) when (@a){
　　&::after{
　　content: @a;
　　}
}
// 匹配成功
.truth1{
　　.truth(true);
}
// 匹配失败
.truth2{
　　.truth(#fff);
}
          
/* 类型判断函数
 * iscolor
 * isnumber
 * isstring
 * iskeyword
 * isurl
 */
.bear(@color) when (iscolor(@color)){
　　color: @color;
}
/* 单位判断函数
 * ispixel
 * ispercentage
 * isem
 * isunit
 */
.bear(@height) when (ispixel(@height)){
　　height: @height;
}
// =,>,>=,<=,< 关系运算符
.rich(@h) when (@h > 1000){
　　height: @h;    
}
// and、not、or(使用,号表示) 逻辑运算符
.huge(@h, @w) when (@h > 180) and (@w > 180){
　　height: @h;
　　 @w;
}
// 使用& when()实现if语句
@debug: true;
& when (@debug){
　　div{
　　　　border: solid 1px red;
    }
}
          
// 通过递归实现循环
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
　　.column-@{i} {
　　　　 (@i * 100% / @n);
　　}
   .generate-columns(@n, (@i + 1));
}
    复制代码

    　　最终输出：

    复制代码
    .truth1::after {
  content: true;
}
/* 类型判断函数
 * iscolor
 * isnumber
 * isstring
 * iskeyword
 * isurl
 */
/* 单位判断函数
 * ispixel
 * ispercentage
 * isem
 * isunit
 */
div {
  border: solid 1px red;
}
.column-1 {
   25%;
}
.column-2 {
   50%;
}
.column-3 {
   75%;
}
.column-4 {
   100%;
}
    复制代码

    五、运算符　　　　　　　　　　　　　　　　　　　　　　　　　　　 

      Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点：

      1. 运算数与运算符间必须用空格分隔；

      2. 以第一个运算数的单位作为运算结果的单位；

        Less源码：

    复制代码
    // 运算数与运算符间没有空格
@fail: 1px +2em;
.fail{
  height: @fail;
}

@success1: 1px + 2em;
.success1{
  height: @success1;
}

@success2: 2em + 1px;
.success2{
  height: @success2;
}
    复制代码

        最终输出：

    复制代码
    .fail{
  height: 1px 2em;
}

.success1{
  height: 3px;
}

.success2{
  height: 3em;
}
    复制代码

    六、函数　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

      Less为我们提供了一个功能强大的内置函数库，其中绝大部分为颜色处理函数。下面着重介绍Misc Function中的default函数、String Function中的escape函数和颜色处理函数。

      1. default函数

         示例：

    复制代码
    // for teenager
.person(@age) when (@age <= 19) and (@age >=13){
  height: @age * 10px;
}
// for child
.person(@age) when (@age <13){
  height: @age * 6px;
}
// for adult
.person(@age) when (default()){
  height: 180px;
}

.son{
  .person(10);
}
.daughter{
  person(17);
}
.father{
 .person(27);
}
    复制代码

        最终输出：

    复制代码
    .son{
  height: 60px;
}
.daughter{
  height: 170px;
}
.father{
  height: 180px;
}
    复制代码

        虽然上述示例逻辑上不合理。但可以看出default函数用于条件控制当中，充当else或switch语句中default的角色。

        通过官网提供的综合示例我们可以更好理解它的用法：

    复制代码
    // Less源码
.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;
}
    复制代码

       注意：

         1. default函数必须在条件控制语句当中使用；

         2. default函数可实现比else更复杂的功能，如下：

    复制代码
    // Less源码
.mixin(@value) when (ispixel(@value)) { @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}

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

div-2 {
  /* ... */
  .mixin(100%);
}

// 最终输出：
div-1 {
   100px;
  padding: 20px;
}
div-2 {
  /* ... */
}
    复制代码

      2. escape函数

        顾名思义就是对字符串中的特定字符进行编码，该函数将对<space>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ 和 =字符进行编码。

      3. 颜色处理函数

        颜色处理函数又分为四大类：颜色定义函数(Color Definition)(

    rgb，rgba,argb(用于安卓开发),hsl(当你想基于一种颜色的通道来创建另一种颜色时很方便，例如： @new: hsl(hue(@old), 45%, 90%);,hsla,hsv(用于Photoshop中可用色彩空间),

    )、颜色通道值获取函数(Color Channel)(获取你想要的R,G,B,A等等)、颜色通道值修改函数(Color Operation Function)（操作颜色变亮变暗变其他颜色）、混色函数(Color Blending)。

    multiply

    分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算，然后再除以 255，输出结果是更深的颜色。（译注：对应Photoshop中的“变暗/正片叠底”。）

        这里仅仅介绍常用的lighten和darken函数。

         lighten(color, amount) ，color为颜色，amount为增加的亮度值，取值范围为0-100%。

         darken(color, amount) ，color为颜色，amount为减少的亮度值，取值范围为0-100%。

    screen

    与 multiply 函数效果相反，输出结果是更亮的颜色。（译注：对应Photoshop中的“变亮/滤色”。）

    。。。。。。。。

    数学函数：

    ceil(2,4)向上取整3，

    floor(2,6)向下取整2，

    percentage（0.5）将浮点数转成百分比字符串50%，

    round（1.67,1）四舍五入取整，1.7，第二参数默认为0；

     

    sqrt

    计算一个数的平方根，并原样保持单位

     

    abs

    计算数字的绝对值，并原样保持单位。

     正反余弦正弦正切

    pi

    返回圆周率 π (pi);

    pow

    设第一个参数为A，第二个参数为B，返回A的B次方。

    mod

    返回第一个参数对第二参数取余的结果。

    min

    返回一系列值中最小的那个。

    max

    返回一系列值中最大的那个。

    列表函数

    length：返回列表中元素的个数。

    extract：返回列表中指定位置的元素。

    字符串函数

    escape

    对字符串中的特殊字符做 URL-encoding 编码。

    • 这些字符不会被编码：,, /, ?, @, &, +, ', ~, ! and $。
    • 被编码的字符是：<space>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =。

    参数：string: 需要转义的字符串。

    返回值：转义后不带引号的 string 字符串。

    案例：

    escape('a=1')

    输出：

    a%3D1

    注意：如果参数不是字符串的话，函数行为是不可预知的。目前传入颜色值的话会返回 undefined ，其它的值会原样返回。写代码时不应该依赖这个特性，而且这个特性在未来有可能改变。

    e

    用于对 CSS 的转义，已经由 ~"value" 语法代替。

    它接受一个字符串作为参数，并原样返回内容，不含引号。它可用于输出一些不合法的 CSS 语法，或者是使用 LESS 不能识别的属性。

    参数：string - 需要转义的字符串。

    返回值： string - 转义后的字符串，不含引号

    案例：

    filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");

    输出：

    filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

    注意：也接受经 ~"" 转义的值或者是数字作为参数。任何其它的值将产生错误。

    % 格式化

    此函数 %(string, arguments ...) 用于格式化字符串。

    第一个参数是一个包含占位符的字符串。占位符以百分号 % 开头，后面跟着字母 s、S、d、D、a 或 A。后续的参数用于替换这些占位符。如果你需要输出百分号，可以多用一个百分号来转义 %%。

    使用大写的占位符可以将特殊字符按照 UTF-8 编码进行转义。 此函数将会对所有的特殊字符进行转义，除了 ()'~! 。空格会被转义为%20 。小写的占位符将原样输出特殊字符，不进行转义。

    占位符说明：

    • d, D, a, A - 以被任意类型的参数替换 (颜色、数字、转义后的字符串、表达式等)。如果将它们和字符串一起使用，则整个字符串都会被使用，包括引号。然而，引号将会按原样放在字符串中，不会用 "/" 或类似的方式转义。
    • s, S - 可以被除了颜色的之外的任何类型参数替换。如果你将它们和字符串一起使用，则只有字符串的值会被使用，引号会被忽略。

    参数：

    • string: 有占位符的格式化字符串。
    • anything* : 用于替换占位符的值。

    • 返回值： 格式化后的 字符串（string）.

      案例：

      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

    • 用一个字符串替换一段文本。

      添加于 v1.7.0 版本

      参数：

      • 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;

    • 杂项函数

    color：解析颜色值，将代表颜色的自负转成颜色值，

    convert:将数字从一种单位转换成另一种单位，

     

    unit：对单位进行增删，unit（5，px）返回5px,

                                         unit(5em);返回5；

 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhangxinxin111/p/4710590.html