Less简介

     CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS/sass 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

(less css预处理器)

     本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

**less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别，所以啊，我们写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。**

LESS安装

> 安装less，需要先安装node，因为less环境是依赖与node环境的。

安装node

1. 下载node安装包（已经提供）
2. 双击安装（不大, 直接安装在C盘，方便查找）
3. 在cmd命令行中输入`node -v`以及`npm -v`查看是否安装成功

基本使用步骤

在**管理员模式**cmd命令行中输入以下代码:**需要联网**

[Shell] 纯文本查看 复制代码

npm install -g less 

  -g:全局安装，意味这装了一次，以后就可以直接用less

等待安装完成,然后输入以下命令

lessc -v   //查看less的版本

less的编译

> 如何把less文件变成css文件

### 使用lessc命令

[Bash shell] 纯文本查看 复制代码

lessc index.less index.html

**配合webstorm可以做到实时的编译**,

**需要安装node环境，需要安装lessc命令**

常用编辑器配置less

  webstorm配置less

    `文件`-->`设置`-->`工具`-->`File Watchers`-->`右侧绿色的+号`-->`less`

使用考拉

> koala是一个前端预处理器语言（less/sass）图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

使用步骤：

1. 把`less`文件夹拖进去
2. 会在当前目录生成一个`css`目录

优点：不用node环境，不用less环境，koala内置了。

Less语法

less初体验

新建一个less文件，输入以下代码:

[Scss] 纯文本查看 复制代码

@color:red;

p {

  color:@color;

}

可以看到，webstorm自动的帮我们生成了对应的css文件。

[CSS] 纯文本查看 复制代码

p {
  color:@color;
}

变量

**注释**

/*这个注释是CSS中的注释，因此会编译到css中*/
//这个注释,CSS中用不了，因此不会编译出来。

**变量**

[Scss] 纯文本查看 复制代码

@charset "UTF-8";

@wjs_color:#e92322;

body {

  background-color: @wjs_color;

}
div {

  width: 400px;

  height: 400px;

  border: 1px solid @wjs_color;

}

对应的css：

[CSS] 纯文本查看 复制代码

body {
  background-color: @wjs_color;
}
div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}

mixin混入
**混入样式类**

[Scss] 纯文本查看 复制代码

@charset "UTF-8";

//混入

.btn {

  width: 200px;

  height: 50px;

  background-color: #fff;

}
.btn_border {

  border: 1px solid #ccc;

}
.btn_danger {

  background-color: red;

}
.btn_block {

  display: block;

  width: 100%;
}
//混入其他类的样式。

.my_btn {

  .btn();

  .btn_block();

  .btn_border();

  .btn_danger();

}

编译后的css

[CSS] 纯文本查看 复制代码

@charset "UTF-8";
.btn {

  width: 200px;

  height: 50px;

  background-color: #fff;
}
.btn_border {

  border: 1px solid #ccc;

}

.btn_danger {

  background-color: red;

}

.btn_block {

  display: block;

  width: 100%;

}

.my_btn {

  width: 200px;

  height: 50px;

  background-color: #fff;

  display: block;

  width: 100%;

  border: 1px solid #ccc;

  background-color: red;

}

缺点：写了很多类，但是都编译到css文件中了，其实我们需要的仅仅是.my_btn这一个类。

嵌套

> 我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

- 使用伪类的时候 可以使用`&` 表示自己

[Sass] 纯文本查看 复制代码

@charset "UTF-8";

.wjs_header {

  border-bottom: 1px solid #ccc;

}

.wjs_header .header_item {

  height: 40px;

  line-height: 40px;

  text-align: center;

  border-left: 1px solid #ccc;

}

.wjs_header .header_item:first-child {

  border-left: none;

}

导入

[Sass] 纯文本查看 复制代码

@charset "UTF-8";
@import "01-variable";

@import "02-maxin";

@import "03-mixin02";

@import "04-book";

模块化的思想，分模块进行管理这些less文件，最终只需要使用import将less引入到一起即可。

奈斯

奈斯