初识less

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文件。

学习网站：

中文网: http://lesscss.cn/

LESS安装

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

安装node

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

基本使用步骤

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

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

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

lessc -v   //查看less的版本

less的编译

如何把less文件变成css文件

使用lessc命令

lessc index.less index.css

Less语法

less初体验

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

@color:red;
p {
  color:@color;
}

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

变量

注释

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

变量

@charset "UTF-8";
@wjs_color:#e92322;
body {
  background-color: @wjs_color;
}

div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}

mixin混入

混入样式类

@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

@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这一个类。

混入函数

不带参数的函数

@charset "UTF-8";

//不会被编译
.btn() {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.my_btn {
  .btn();
}

带参数的函数

.btn_border(@width) {
  border: @width solid #000;
}
.my_btn {
  //如果函数定义了参数，调用的时候必须传入参数，否则会报错
  .btn_border();
  //传入参数，就不会报错
  .btn_border(10px);
}

带默认值的函数

.btn_border(@width:1px) {
  border: @width solid #000;
}
.my_btn {
  //因为有默认值，所以不会报错
  .btn_border();
  //传入参数，会覆盖1px，也不会报错
  .btn_border(10px);
}

嵌套

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

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

  @charset “UTF-8”;
  .header{
  width:100%;
  height: 100px;
  background-color: #ccc;

   .header-left{
      width: 50px;
      height: 100%;
      background-clip: content-box;
      background-origin:content-box;
   }   
   >.header-right{
      background-color: yellow;
   }
   &.info{
      width: 50px;
   }
   &:before{
      content:"";
      
   }
  

  }

导入

@charset "UTF-8";

@import "variable";

@import "maxin";

@import "nesting";

@import "main";

假设main 是核心文件，其他的都是辅助文件，最终编译的时候把其他几个导入，只编译main就可以了。

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

函数（运算）

在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。

http://www.1024i.com/demo/less/reference.html