这个属性值老是重复写好烦
这个属性值我在前面那个CSS文件中写过,好想直接拿过来用
CSS能不能像其他程序性语言一样用一个变量来代替需要重复利用的内容呢
鉴于以上的想法并非我一人会想到,只要是做过前端的肯定都会思考过这个问题,无奈CSS基本可以说没有语法可依循,于是LESS框架应运而生
什么是LESS
作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念
它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
LESS的原理
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
环境配置
以webStorm为例,在开始使用LESS之前你必须要安装以下环境
node.js
node.js命令行输入“npm install -g less”安装less；
打开webstorm，File→Settings→Tools→File Watchers,点击右侧绿色“+”号
这里写图片描述
当然还有一种办法使用LESS就是直接使用HBuilder编辑器,自带LESS插件
开始使用
本例以HBuilder编写,在我们写LESS文件的时候会自动帮我们生成CSS文件
这里写图片描述
这里写图片描述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link href="css/index.css" rel="stylesheet" />
<body>
<div class="index-home">
<span>This is index</span>
</div>
</body>
</html>
我们的CSS文件会自动生成,不用做任何修改,我们只需要修改我们的LESS文件即可
这里写图片描述
@index-color:red
.index-home{
box-sizing: content-box
background-color: @index-color
}
写完之后我们去看一下index.css生成的代码
这里写图片描述
是的背景色变成了红色,我们看一下运行效果
这里写图片描述
是的,就是这么好使,如果你以为本文结束了,那就错了,这只能满足当前页面引用当前LESS文件中的变量,如何引用其他变量呢?
LESS文件中是可以引用其他LESS文件的,玩过Java的都知道,引用一个类会用到什么关键字,没错,import,大家准备上车!!!!
现在我想在index.less文件中去引用一个基类LESS文件,该如何书写呢
首先写base-less.less
这里写图片描述
@base-font-color:white
1
1
在base-less文件中写一个base-font-color:white来控制文本颜色为白色
在index.less中引用,如下
这里写图片描述
很简单明了,引用结束我们看一下效果是怎么样的
这里写图片描述
看到这里,有人会问,能不能直接引用LESS文件啊?
当然可以啊
我们可以直接在客户端使用 .less（LESS 源文件），只需要从 http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：
LESS 源文件的引入方式与标准 CSS 文件引入方式一样：
<link rel="stylesheet/less" type="text/css" href="index.less">
<link rel="stylesheet/less" type="text/css" href="index.less">
其实LESS是有自己的生命周期的,哦,不好意思,是作用域…
简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。
简单明了,代码示例:
@width : 20px
.index{
@width : 30px
.centerDiv{
width : @width// 此处应该取最近定义的变量 width 的值 30px
}
}
.leftDiv {
width : @width// 此处应该取最上面定义的变量 width 的值 20px
}
最后,最后也是LESS最厉害的作用之一了,你可以把LESS当成JS来玩
@import "base-less.less"
@index-color: red
.index-home {
box-sizing: content-box
background-color: @index-color
color: @base-font-color
.marginTop(100px)
}
.marginTop(@distance) {
margin-top: @distance
}
这里写图片描述
可以直接调用”函数”来完成一些属性的赋值,看下效果如何
less中目前无法访问javascript，因为less只是对css进行了扩展封装。less的优点：
1.清晰的css逻辑结构，使处于#header选择器的css样式全部写在#header样式块中。
2.样式变量，less官网称为混合模式
其中.red (){ color: red.co{ border: 1px solid red} }与.red { color: red.co{ border: 1px solid red} }的写法，与效果是有本质区别的。
.red (){ color: red.co{ border: 1px solid red} } 相当建立了个样式变量，不会再css中显示，不会直接起作用，类似于未实例化。 只有在.class{}中调用才会起作用。调用的效果为.class{color: red.co{ border: 1px solid red}}这就防止了废弃不被使用css样式
.red {color: red.co{ border: 1px solid red}}是一个已经起作用的类，在.class{}中调用效果为 .class{color: red.red{.co{ border: 1px solid red}}}。
less官网自带winless一个将less自动生成css的工具，会自动监控指定的less文件，只要文件被更改就会自动更新生成新的被压缩的css文件。
