学习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。）

一、定义变量：@width: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){
　　width: 100px;
　　height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer{
　　&:extend(.animal);
　　width: 50px;
　　height: 50px;
}

    最终输出：

    .animal,
.bear,
.deer {
  color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear {
  width: 100px;
  height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer {
  width: 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;
[email protected]{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-width: 1023px){
   　　// 继承父media query块的选择器样式
      .son2:extend(.parent1){}
      .parent2{
      　　width: 200px;
      }
   }
}

    　 最终输出：

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

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

    　　Less源码：

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

    　　最终输出：

    @media screen {
  .parent,
  .son {
    height: 100px;
  }
}
@media screen and (min-width: 1023px) {
  .parent,
  .son {
    width: 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;@width:20px){
　　height: @age * 12px;
　　width: @width;
}
// 仅匹配到 .dog(@name){
.one-dog{
　　.dog(‘chihuahua‘);
}
// 匹配到.dog(@name;@age) 和 .dog(@name;@age;@width: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;
  width: 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;
　　width: @w;
}
// 使用& when()实现if语句
@debug: true;
& when (@debug){
　　div{
　　　　border: solid 1px red;
    }
}

// 通过递归实现循环
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
　　[email protected]{i} {
　　　　width: (@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 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 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)) {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 {
  /* ... */
}

      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；

时间： 2024-08-09 10:44:36

学习less;的相关文章

Vue.js学习笔记：属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习（吐血超详细总结）

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 三Thread和Runnable的区别 四线程状态转换 五线程调度 六常用函数说明 使用方式 为什么要用join方法 七常见线程名词解释 八线程同步 九线程数据传递 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结（2）------- 之for循环，绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage:

winform学习日志（二十三）---------------socket（TCP）发送文件

一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net.Sockets; using Sys

零基础的人该怎么学习JAVA

对于JAVA有所兴趣但又是零基础的人,该如何学习JAVA呢?对于想要学习开发技术的学子来说找到一个合适自己的培训机构是非常难的事情,在选择的过程中总是 因为这样或那样的问题让你犹豫不决,阻碍你前进的步伐,今天就让小编为您推荐培训机构新起之秀--乐橙谷Java培训机构,助力你成就好未来. 选择java培训就到乐橙谷 北京有什么好的Java培训机构?来乐橙谷北京学Java,零基础走起,乐橙谷Java基础班授课老师经验非常丰富,课程内容安排合理,适合于有一点点Java基础甚至一点都不会Java的同学学

最全解析如何正确学习JavaScript指南，必看！

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

轻松学习C语言编程的秘诀：总结+灵感

目前在准备一套C语言的学习教程,所以我这里就以C语言编程的学习来讲.注意,讲的是"轻松学习",那种不注重方法,拼命玩命的方式也有其效果,但不是我提倡的.我讲究的是在方式方法对头.适合你.减轻你学习负担和心里压力的前提下,才适当的抓紧时间. 因此,探索一种很好的学习方法就是我所研究的主要内容. 众所周知,学习C语言并非易事,要学好它更是难上加难.这和你期末考试背会几个题目的答案考上满分没多大关系,也就是说你考试满分也说明不了你学好.学精通了C语言.那么怎么才算学精通C语言?闭着眼睛对自己

开始我的Python爬虫学习之路

因为工作需要经常收集一些数据,我就想通过学爬虫来实现自动化完成比较重复的任务. 目前我Python的状况,跟着敲了几个教程,也算是懂点基础,具体比较深入的知识,是打算从做项目中慢慢去了解学习. 我是觉得如果一开始就钻细节的话,是很容易受到打击而放弃的,做点小项目让自己获得点成就感路才更容易更有信心走下去. 反正遇到不懂的就多查多问就对了. 知乎上看了很多关于入门Python爬虫的问答,给自己总结出了大概的学习方向. 基础: HTML&CSS,JOSN,HTTP协议(这些要了解,不太需要精通) R

javaweb学习纲要

Java Web  概述 大纲: 1.C/S体系结构 2.B/S体系机构 3.两种体系结构比较 4.主流的Web程序应用平台 5.java web学习路线图 1.C/S体系结构 C/S是Client/Server的缩写,即客户端/服务器结构.在这种结构中,服务器通常采用高性能的PC机或工作站,并采用大型数据库系统(如Oracle或SQL Server),客户端则需要安装专用的客户端软件,如下图所示.这种结构可以充分利用两端硬件环境的优势,将任务合理分配到客户端和服务,从而降低了系统的通讯开销.在