less命令进入后搜索

转载

编程小达人之心 2024-12-17 17:41:18

文章标签 less命令进入后搜索选择器 Less CSS 文章分类 架构后端开发

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中的变量有以下规则：

以@作为变量的起始标识，变量名由字母、数字、_和-组成
没有先定义后使用的规定；
以最后定义的值为最终值；
可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；？？？

用于 选择器部件，必须使用"@{变量名}" 的形式

定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
存在作用域，局部作用域优先级高于全局作用域；

列表类型

内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数

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

3. 嵌套(Nested)

4. 父选择器引用(ParentSelector)

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

　　Less源码：

less命令进入后搜索_CSS

/* 
  * 采用&引用完整的父选择器
  * 可通过追加和预追加的方式加工&，从而生成新的选择器
  * 通过&::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;
   }
}

less命令进入后搜索_CSS

-----------------------------------------------------------------------------------------

#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)

@import '文件路径'; 引入外部的less文件。

注意：

不带扩展名或带非.less的扩展名均被视为less文件;
@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;
}

less命令进入后搜索_CSS

最终输出：

less命令进入后搜索_CSS

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

less命令进入后搜索_CSS

注意事项：

6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。 Less源码：

less命令进入后搜索_CSS

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){}

less命令进入后搜索_CSS

最终输出：

less命令进入后搜索_CSS

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

less命令进入后搜索_CSS

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

Less源码：

less命令进入后搜索_CSS

@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){}

less命令进入后搜索_CSS

最终输出：

less命令进入后搜索_CSS

.parent1,
.son2,
.son3 {
  height: 100px;
}
.parent2 {
  height: 200px;
}

less命令进入后搜索_CSS

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

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

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

　 Less源码：

less命令进入后搜索_CSS

.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;
      }
   }
}

less命令进入后搜索_CSS

　最终输出：

less命令进入后搜索_CSS

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

less命令进入后搜索_CSS

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

　　Less源码：

less命令进入后搜索_CSS

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

less命令进入后搜索_CSS

　　最终输出：

less命令进入后搜索_CSS

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

less命令进入后搜索_CSS

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

7. 混合(Mixin)

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

7.1. 类选择器、ID选择器自动被定义为mixin，而且具有命名空间； 　　Less源码：

less命令进入后搜索_CSS

.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;
}

less命令进入后搜索_CSS

　　最终输出：

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

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

　　Less源码：

less命令进入后搜索_CSS

// 定义不带参数的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);
}

less命令进入后搜索_CSS

　　最终输出：

.chihuahua {
  height: 24px;
}

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

　　Less源码：

less命令进入后搜索_CSS

@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);    
}

less命令进入后搜索_CSS

　　最终输出：

less命令进入后搜索_CSS

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

less命令进入后搜索_CSS

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

　　Less源码：

less命令进入后搜索_CSS

.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);
}

less命令进入后搜索_CSS

　　最终输出：

less命令进入后搜索_CSS_32

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

less命令进入后搜索_CSS

when关键字来提供选择的作业控制，通过递归来实现循环的作业控制。

　　Less源码：

less命令进入后搜索_CSS

// 条件匹配
// 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) {
　　.column-@{i} {
　　　　width: (@i * 100% / @n);
　　}
   .generate-columns(@n, (@i + 1));
}

less命令进入后搜索_CSS

　　最终输出：

less命令进入后搜索_CSS

.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命令进入后搜索_CSS

五、运算符　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

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

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

Less源码：

less命令进入后搜索_CSS

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

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

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

less命令进入后搜索_CSS

最终输出：

less命令进入后搜索_CSS

.fail{
  height: 1px 2em;
}

.success1{
  height: 3px;
}

.success2{
  height: 3em;
}

less命令进入后搜索_CSS

六、函数　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

示例：

less命令进入后搜索_CSS

// 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);
}

less命令进入后搜索_CSS

最终输出：

less命令进入后搜索_CSS

.son{
  height: 60px;
}
.daughter{
  height: 170px;
}
.father{
  height: 180px;
}

less命令进入后搜索_CSS

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

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

less命令进入后搜索_CSS

// 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;
}

less命令进入后搜索_CSS

注意：

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

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

less命令进入后搜索_CSS

// 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 {
  /* ... */
}

less命令进入后搜索_CSS

2. escape函数

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

颜色处理函数又分为四大类：颜色定义函数(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；

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：iostat计算io的原理

下一篇：spring 不做健康检查

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯