如何使用Less？一篇博客就够了

CSS的缺点

    CSS是一门典型的标记型语言，使用起来非常的简单粗暴，但是CSS并不具有很强的逻辑性，甚至说其实没什么逻辑性，并不像一门正儿八经的编程语言。一旦我们的css文件量大、嵌套深，就会导致我们维护样式变得非常的麻烦，可能修改某个地方的样式，都要去找半天。
    但是往往就是因为各种疑难杂症的问题才会引领着我们技术的发展。没错，正是因为CSS的 “落后” ,为了让我们的样式文件更具有逻辑性，于是涌现了一波非常神奇的语言——CSS预处理语言。

CSS预处理语言

    CSS预处理语言的诞生，让CSS成为了一门可以使用变量、循环、继承等多种特性的标记型语言。得以让CSS文件变得更具逻辑性，大大的增加了其可阅读性和维护性。
    目前，在我所了解的范围内，有三款预处理语言：Less、Sass、Stylus，本篇博客介绍的是其中的Less。

Less简单介绍

    Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充（引用于官网）。

Less的使用

    我们需要在页面中引入less.js文件，并且在引入JS文件之前，写上link标签，注意link标签的rel为stylesheet/less。

<link rel="stylesheet/less" href="style.less">
<script src="../bower_components/less/dist/less.min.js"></script>

变量的使用

    Less的变量非常的强大，万物皆可化变量。

值变量

/*LESS文件*/
@color: #ccc;
@width: 100px;
@height: 100px;
#test {
    width: @width;
    height: @height;
    background-color: @color;
}

/*生成后的CSS*/
#test {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

    定义变量使用@，在使用变量的使用同样需要加上@，在平时的开发当中，一般我们将这些变量单独的存放到一个less文件当中，便于管理：

@backGroundColor: red;
@baseWidth: 200px;
@baseHeight: 250px;
@borderColor: #ccc;
@ButtonBgColor: #463573;

选择器变量

    选择器变量可以让我们的选择器成为动态的。

/* Less */
@Selector: #box;
@Content: box;
@{Selector}{
  color: #999;
  width: 50%;
}
.@{Content}{
  color:#ccc;
}
#@{Content}{
  color:#666;
}

/*生成后的CSS*/
#box {
  color: #999;
  width: 50%;
}
.box {
	color:#ccc;
}
#box {
	color:#666;
}

    定义选择器变量有两种方式：
①直接跟上选择器@Selector: #box，对应使用方法：@{Selector}
②一种是只跟上名字@Content: box，对应使用方法：#@{Content}、.@{Content}

属性变量

    属性变量可以大大减少我们的代码书写量

/*Less*/
@bgc: background-color;
#box {
	@{bgc}: red;
}

/*CSS*/
#box {
	background-color: red;
}

URL变量

    当我们项目目录发生变化的时候，就不需要一个一个去修该路径了。只需要修改路径变量即可：

/*Less*/
@imgUrl: "../imgs";
#box {
	background: url("@{imgUrl}/beautiful.jpg");
}

/*CSS*/
#box {
	background: url("../imgs/beautiful.jpg");
}

申明变量

    有点类似于函数的感觉，将所有样式包在一起使用。

/*Less*/
@boxStyle: {
	width: 100px;
	height: 100px;
	background-color: red;
}
#box {
	@boxStyle();
}

/*CSS*/
#box {
	width: 100px;
	height: 100px;
	background-color: red;
}

变量的运算

    Less的变量还可以进行计算使用，简单体会下：

/*Less*/
@width: 200px;
@height: 200px;
@color: #333;
#box {
	width: @width + 100;
	height: @height * 2;
	background-color: @color + #111;
}

/*CSS*/
#box {
	width: 300px;
	height: 400px;
	background-color: #444;
}

变量的作用域

总结一句话就是：就近原则

/*Less*/
@width: 100%;
@temp: @width;
#box {
	@width: 80%;
	width: @temp;
}

/*CSS*/
#box {
	width: 80%;
}

&的使用

&在嵌套的样式中，可以表示上一层的选择器

/*Less*/
#header {
  &:after {
 	content: "Hello"; 
  }
  .title {
 	color: red; 
  }
  &_max { //不会嵌套进去
 	width: 200px; 
  }
}

/*CSS*/
#header:after {
  content: "Hello";
}
#header .title {
  color: red;
}
#header_max {
  width: 200px;
}

混合方法的使用

混合方法有点像之前说的变量申明。

无参数方法

/*Less*/
.fun() {
	color: red;
	font-size: 16px;
}
#test {
	.fun();
}

/*CSS*/
#test {
	color: red;
	font-size: 16px;
}

PS:方法前缀除了可以写 . 还可以写 #，调用方法的时候，可以写(),也可以不写（推荐定义和调用都加上()来避免混淆）

带参数方法

less中的混合方法可以带参数，同时支持默认参数，参数必须要带单位。和JS类似，@arguments指代是所有的参数。

/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
} 
#main{
   .border(0px,5px,30px,red);//必须带着单位 
} 
#wrap{
   .border(0px);
}
#content{
   .border();
}

/*CSS*/
#main {
  border: solid 1px red;
  box-shadow: 0px 5px 30px red;
}
#wrap {
  border: solid 1px #000000;
  box-shadow: 0px 50px 30px #000000;
}
#content {
  border: solid 1px #000000;
  box-shadow: 10px 50px 30px #000000;
}

方法的命名空间

方法的命名空间是为了让方法的定义和使用更加的规范。

/*Less*/
.father() {
	background-color: red;
    .son(@w:100px) {
  	   width: @w;
  }
}

#content{
	.father > .son
}

/*CSS*/
#content {
  width: 100px;
}

如果存在嵌套的方法定义，想要使用子方法，必须父方法 > 子方法 的形式调用，并且父方法不能带()

方法的条件筛选

在Less中，没有if...else，但是有when
and运算符： 相当于&&，必须全部满足条件才会运行。
not运算符： 相当于非运算符!，条件不符合才会运行。
，运算符： 相当于或运算符||，条件符合其中一个就会运行。

/*Less*/
.fontsize(@size) when (@size > 12px) and (@size < 16px){
	font-size: @size;
}
#test {
	.fontsize(13px);
}

/*CSS*/
#test {
  font-size: 13px;
}

继承

extend 是 Less 的一个伪类。它可以继承指定申明中的所有样式。

/*Less*/
.father {
	color: red;
  	width: 100px;
}
.son {
	&:extend(.father);
}

/*CSS*/
.father,
.son {
  color: red;
  width: 100px;
}

导入

导入less文件可以带后缀名.less，也可以不带，并且可以在任意位置导入。

/*下面两种方式豆科鱼*/
@import "style"; 
@import "style.less";

并且位置可以随便放

#box {
	width: 200px;
}
@import "style.less";

reference

reference表示导入less文件，可以使用，但不会去编译它。

@import (reference) "bootstrap.less"; 

once

是less导入的默认行为，表明导入相同的文件只会被导入一次，重复导入，不会去解析。

@import (once) "style.less";
@import (once) "style.less"; //重复导入，会被忽略

multiple

使用@import (multiple)允许导入多个同名文件。
假如style.less文件内容如下：

#test {
	color: red;
}

重复引入结果如下:

@import (multiple) "style.less";
@import (multiple) "style.less";
   
/* 生成后的 CSS */
#test {
	color: red;
}
#test {
	color: red;
}

总结

Less常用的一些点基本上就是这些了，Less其实还提供了一些函数供我们使用，比如判断颜色，数字等等。感兴趣可以参考官方文档Less函数手册