less实践

语法：

• 变量

通过 @变量名: 来定义变量，通过 @变量名 使用变量，其实本质上是常量了，如：

@width: 10px;  /*定义变量*/
@height: @width + 10px; /*使用变量，和逻辑语句*/

#header {
  width: @width;  /*使用变量*/
  height: @height;
}

转换成 CSS 文件：

/*定义变量*/
/*使用变量，和逻辑语句*/
#header {
  width: 10px;
  /*使用变量*/
  height: 20px;
}

less注释

/*这是注释1*/
//这是注释2

转换成 css 文件：

/*这是注释1*/

• Mixins（混合）
  作用：有时候写在某个选择器中的属性样式，在其他选择器中也需要，所以通常是直接将那部分复制粘贴过来使用。
  Mixins 允许你在某个选择器内，直接使用其他选择器内的属性样式

//类选择器 class1 的属性样式
.class1 {   
  width: 10px;
  height: 20px;
}

 //定义了一个模板样式，类似于函数的作用
.class2(@color: #fff) {  
  background-color: @color;
}

//定义了一个模板样式，类似于函数作用
#id1() {  
  border: 1px solid #ff22ff;
}

.main { 
  .class1; //直接使用其他选择器定义的属性样式
  .class2(#f2f); //使用模板样式，传入参数
  #id1; //使用模板样式，不传参时，括号可省略
}

转换后的 CSS 文件：

.class1 {
  width: 10px;
  height: 20px;
}
.main {
  width: 10px;
  height: 20px;
  background-color: #f2f;
  border: 1px solid #ff22ff;
}

定义好的基本选择器，如.class1，可直接在其他选择器内通过 .calss1 将内部的属性样式都复制过来。也可以在基本选择器后面加上 ()括号,这个就会被当做模板处理，作用类似于函数，可接收参数，使用时就类似于调用函数那么使用，如果不传参，调用时也可以将括号省略

• 命名空间
  属于 less 自己的命名空间，也就是这些代码并不会在转换后的 CSS 文件中出现。类似函数存在的那些模板选择器，当在书写选择器时，在其后面增加 () 括号，则表示这个选择器只属于 less 的命名空间，转成 CSS 后并不会出现。

• 嵌套
  less 允许依据 HTML 中的嵌套层次来书写,如：

body {
  font-size: 16px;
  .content {
    .banner {
      ul {
        img {
          width: 700px;
          height: 300px;
          &:hover {
            width: 800px;
            height: 300px;
          }
        }
      }
    }
  }
}

转换成 CSS 文件：

body {
  font-size: 16px;
}
body .content .banner ul img {
  width: 700px;
  height: 300px;
}
body .content .banner ul img:hover {
  width: 800px;
  height: 300px;
}

后代的组合选择器规则根据 HTML 文档中标签的嵌套层次来书写,有一点需要注意的是，类似a:hover这种伪类选择器，需要加一个&符号。

• 运算
  less 允许在代码中进行一些简单的加、减、乘、除基本运算，结合变量的使用，可进行动态运算效果。通常，变量和运算都是用于对颜色、大小等进行计算。

@border: 1px;
@color: #fff;
#header {
  color: @color * 0.5;
  border-width: @border @border*2 @border*3 @border*4;
}

转换成 CSS 后：

#header {
  color: #808080;
  border-width: 1px 2px 3px 4px;
}

• 内置函数
  less 内置了一些基础函数，可用于转换颜色、处理字符串、算术运算等;如：

color("#aaa");  //输出 #aaa， 将字符串的颜色值转换为颜色值
image-size("file.png");  //输出 => 10px 10px，获取图片文件的宽高信息
image-with("file.png"); image-height("file.png"); //获取图片文件宽高
convert(9s, "ms");  //输出 => 9000ms，单位换算，例如对 m,cm,mmin,pt,pc的换算
@size: if((true), 1px, 0px);  //if函数，第一个参数为条件，满足则返回第二个参数，不满足返回第三个参数

if(not (true), 1px, 0px);     //非语句， not
if((true) and (true), 1px, 0px); //逻辑与语句， and 
if((false) or (true), 1px, 0px); //逻辑或语句， or 

//处理数组
@list: "banana", "tomato", "potato", "peach";
length(@list);  // 输出 => 4
extract(@list, 3);  //输出 => potato,注意第一个不是从 0 开始计算

//类型判断
isnumber(#ff0);  // false
isstring("234"); // true
iscolor(#ff0);   // true
isXXX
...

内置函数很多，用途也很多，覆盖了基本算术运算、逻辑语句、颜色计算、字符串处理等等

• 作用域
  类似 JavaScript 中的变量作用域，因为在 less 中都是通过 @变量名:来定义变量的，后定义的会覆盖掉前定义的，但当在不同嵌套层次中定义同一变量时，就存在局部变量和外部变量之分，内部变量并不会覆盖掉外部变量。
  类似 JavaScript 中的提前特性，如：

@var: red;

#aaa {
  color: @var;  // yellow，因为后面定义的 @var:yellow 将 @var:red 覆盖掉了
}

#page {
  #header {
    color: @var; // white，内部变量不影响外部变量
  }
  @var: white;
}

@var: yellow;

#ppp {
  color: @var;  //yellow
}

看看转换成 CSS 后：

#aaa {
  color: yellow;
}
#page #header {
  color: white;
}
#ppp {
  color: yellow;
}

• import（导入）
  可以使用 @import 命令将其全部引入使用某份less 文件。

@import "main";

最后在 test.css 里会汇合 main.less 里的代码。

---

配置：

vscode中，在扩展里安装 Easy LESS这个插件，在css文件夹中创建一个less后缀名，保存后会自动生成一个对应的css文件，页面刷新看效果了（ps:webstorm下搭建编译less环境）

小工具考拉（koala），可以将less文件编译成css文件

将建好的less文件夹拖入到这个软件当中，然后点击右边的“执行编译”就可以看到出现success的提示，确保路径配置正确

• 在VsCode中使用Less方法：

1. 安装node.js

2. 在VSCode中搜索插件 Easy LESS，安装完后重启VSCode

3. 在需要生成css文件的地方，新建一个.less文件。如图：

   
   

4. 写需要的样式，保存后，会自动在同级目录下，生成同样名称的css文件
   至此，普通版的Less配置就完成了

5. 配置settings.json文件 （文件 - 首选项 - 设置 - 搜索设置settings.json）
   内容如下：

{
    "less.compile": {
        "compress": true, // 是否删除多余空白字符
        "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
        "out": "${workspaceRoot}\\src\\assets\\css\\" //${workspaceRoot}代表当前项目的根目录
        //"outExt": ".wxss", // 输出文件的后缀,默认为.css
    }

到此已经配置成功，在文件中新建less文件编程，保存时就会自动在同目录下生成.css文件和.css.map文件。如果是开发小程序可以设置"outExt":".wxss",输出的文件就是.wxss和.wxss.map文件。

其中.css.map文件是用来确保css代码和less中代码对应关系。是为了方便针对性的进行修改了。具体介绍看下图：

---

---

借助 less.js使用

Less 写的 CSS 文件后缀名为 .less，但浏览器并不认识 less 文件，所以最后需要转换成 css 文件，有两种方式：

程序运行期间，浏览器会自动借助 less.js 来解析 less 文件内的代码，转成 css 标准语法

这种方式，不需要配置任何其他环境，只需要下载 less.js，并在项目中使用即可，但有几点需要注意：

<head>
    <!--link标签需要设置 rel=stylesheet/less, less.js的加载需要放在所有 link 标签后面-->
    <link rel="stylesheet/less" type="text/css" href="css/src/main.less"/>
    <link rel="stylesheet/less" type="text/css" href="css/src/test.less"/>
    <script src="js/lib/less.js"></script>
</head>

HTML 文档通过 link 标签引入 less 文件时，需要将 link 标签的 rel 属性设置为 stylesheet/less，否则无效；

而且，用 <script> 标签加载 less.js 的代码需要放在最后，即所有用 link 标签引入 less 文件的后面，因为 less.js 文件加载成功后就会去将 less 转成 css 标准样式，在 <script> 标签后面才用 link 标签引入的那些 less 文件就无法被转换了。

less.js 下载地址：https://github.com/less/less.js/releases