前端知识之CSS预处理器Less

目录

什么是CSS预处理器

less的介绍 

less的使用方法

1、方法一的使用：

2、方法二的使用：

less语法 

1、注释：

 2、定义变量

3、使用嵌套 

4、Mixin

5、Import

---

什么是CSS预处理器

简单来说，CSS预处理器是用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用，它为CSS增加了一些编程的特性，不用考虑浏览器的兼容性问题，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

less的介绍 

 less 是一款比较流行的预处理 CSS，支持变量、混合、函数、嵌套、循环等特点。

less的使用方法

方法一：写完 less 文件，自动编译为 css ，在 html 中引用 css。

方法二：在 html 中直接引用 less 文件。

注意：一般使用方法一，方法二会多出编译的时间，因为 less 需要编译，就需要引入 less.js ，多了一个 HTTP 请求，同时当浏览器禁用了 js ，你的样式就不起作用了。

1、方法一的使用：

步骤一：在 vscode 中安装插件 Easy LESS 。

步骤二：重启 vscode。

步骤三：文件—>首选项—>设置—>搜索 settings.json 

 在 settings.json 中增加属性：

{

   "less.compile":{
        "outExt":".css"
   }

}

在 vscode 中编写 less 文件，即可自动生成 css 文件 。

2、方法二的使用：

其实是浏览器在本地在线地把 less 文件转换为 css 文件。

步骤一：在 less 官网下载 less.js 文件：

 把下载好的文件放在工程文件的lib文件夹里。

步骤二：在 html 中引入 less.js 和我们自己写的 wode.less。

引入代码为：

<link rel="stylesheet/less" href="../wode.less">

注意：我们要在服务器中打开 html 文件，否则，看不到效果。 

less语法 

1、注释：

less 的注释可以有两种：

第一种注释：模板注释

  // 模板注释            这里的注释转换成CSS后将会删除

 因为 less 要转换为  css 才能在浏览器中使用，css 不识别这种注释。

第二种注释：CSS注释

/* CSS 注释语法           转换为CSS后依然保留 */

总结：如果在 less 中写注释，我们推荐写第一种注释。除非是类似于版权等内容，就采用第二种注释。 

 2、定义变量

我们可以把重复使用或经常修改的值定义为变量，在需要使用的地方引用这个变量即可，可以避免很多重复的工作量。

（1）在 less 文件中，定义一个变量：

@变量名:  变量值;                   //格式



@bgColor: #bfa;                     //格式举例

 （2）在 less 文件中引用这个变量。

wode.less:

// 定义变量

@bgColor: #bfa;



// 引用变量

body{

        background-color: @bgColor;

}

我们将上面 less 文件编译为 css 文件后，自动生成的代码如下：

body{
    background-color: #bfc;
}

3、使用嵌套 

 css 中经常会用到子代选择器,效果可能是这样的：

.outer {
  width: 10px;
}

.outer .nav {
  height: 10px;
}

.outer .nav a {
  color: #bfa;
}

上面的代码嵌套了很多层，写起来很繁琐，如果使用 less 的嵌套语法，就比较简洁。

嵌套的举例如下：

wode.less：

.outer {
  width: @outerWidth;

    .nav {
       height: 10px;

       a {
         color: #bfa;

         &:hover {
           color: #fff;
         }
       }
    }
}

4、Mixin

Mixin 的作用是把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了，非常方便。

（1）在 less 文件中定义一个类：（将重复的代码放到自定义的类中）

/* 定义一个类 */

.banner(@radio: 5px) {
  border-radio: @radio;
}

上方代码中，第一行括号里的内容是参数：这个参数是缺省值。

（2）在 less 文件中引用上面这个类：

#pointer {
  .banner;
}

#clear {
  .banner(10px);
}

上方代码中，pointer 中的引用没有带参数（无括号），表示参数为缺省值； clear 中的引用带了参数，那就用这个参数。

5、Import

在开发时，css 文件可以有很多个，less文件也可以有很多个，我们可以将不同的样式放到多个文件中，最后通过@import 的方式合并。意思就是，当出现多个 less 文件时，怎么引用它们。

（1）定义一个被引用的less文件：

_button.less：(被引用的 less 文件，我们一般在前面加下划线，表示它是部分文件。)

.button{
  color: @buttonColor;
}

在这个自定义的 less 文件中可以引用 wode.less 里的自定义变量

（2）在 wode.less 中引用上面的 _button.less

wode.less:

@buttonColor: #bfa;

@import url('_button.less:');    //这里的路径写的是相对路径

body{
  width: 10px;
}

将上面的 wode.less 编译为 wode.css之后，自动生成的代码如下：

.button {
    color: #bfa;
}

body {
    width: 10px;
}