CSS预编译语言-LESS

LESS的作用

CSS层叠样式表，它是标记语言，不是编程语言；所有的预编译CSS语言（less/sass…）都是赋予了CSS的面向对象思想

LESS的编译

LESS叫做预编译CSS：写好的LESS代码浏览器是不能渲染的，需要我们把它编译成为能渲染的CSS才可以

开发环境

在本地开发中这是开发环境 
生产环境 
本地开发完成了，我们需要把代码上传到服务器上，服务器上的环境叫做生产环境

在开发环境下，我们一般都通过导入LESS插件（less-2.5.3.min.js）来随时编译LESS代码

<!--rel的值变为了stylesheet/less-->
<linL rel='stylesheet/less' href='css/1.less'>
<script src='js/less-2.5.3.min.js'></script>
 
<!--由于每一次加载页面，都需要导入less.js，并且把less文件重新编译为css（很消耗性能，页面打开速度肯定会变慢），
所以真实项目中，只有开发环境下我们使用这种模式，生产环境下，我们肯定需要事先把写好的less编译为正常的css后，
在上线，以后用户访问的都是编译好的css，而不是拿less现编译-->

生产环境中，我们需要事先把less编译成为css：
1、使用node编译

　　1、下载安装node

　　2、在node全局环境下使用npm包管理器，安装一个less模块

　　　　npm install less -g 安装命令行

　　3、在执行的目录中执行

　　　　lessc xxx.less xxx.css 把less编译为css

　　　　lessc xxx.less xxx.min.css -x 不仅编译成css，而且还把css压缩了

2、使用编译工具

LESS中的基础语法

变量

/*
* 设置变量使用@[变量名]：变量值（传统css支持的值都可以作为变量值）
* 1、变量名中可以出-
* 在部分减法数学运算的时候，我们需要明确是运算符还是名字中的-
* （@shadow-px）-20
* 2、不是所有的情况下都要使用变量，只有：很多样式都是使用相同的值，而且以后如果改变的话，所有元素的样式都要跟着改变，此时我们才用变量存储起来
*
* LESS中可以支持数学运算
*/
@a:1;
@b:30%;
@c:1000px;
@d:#000;
@shadow-px:100;
.box{
opacity:@a;
filter: alpha(opacity=(@a*100));
}

函数封装

/*
* 在LESS中只要设置了一个样式类，我们就可以把它称之为一个方法，其它地方需要用到这些样式，直接“.[类名]”调用即可（原理：把当前样式类中的代码原封不动的copy一份过去）
* 不加括号即是普通样式类，也是封装的一个函数，编译的时候，这个样式类中的代码依然跟着编译
* 加括号仅仅是封装的函数，编译的时候是不编译函数的
*
* 函数
* .xxx(@xxx:xxx,@xxx){
@arguments
}
*/
 
/*1、*/
.pub(){
width: 100px;
height: 100px;
background: green;
}
 
.box {
.pub();
background: red;
}
 
/*2、*/
.transition(@property:all,@duration,@timing:linear,@delay:0s){
transition:@arguments;
/*transition:@property @duration @timing @delay; */
}
.box{
.transition(all,1s,linear,0s);
transition(@timing:ease,@duration:1s);
}
 
/*3、*/
.sum(@n,@m;0){
@result:@n+@m;
}
.box{
.sum(10,20);
width:unit(@result,px);
/*unit是less提供的方法
* unit（[value],'px'） 给value值设置单位（但是如果之前已经有单位了，此处是把原有单位去掉）
*/
}

命名空间和作用域

@a:10;
.box{
width:unit(@a,px);
@a:20;
.mark{ //=>相当于.box .mark{}
unit(@a,px);
}
}
//结果：
.box{
width:20px;
}
.box .mark{
width: 20px;
}
/*less中也有变量提升，而且less把声明和定义在私有作用域中事先完成了*/

LESS中的extend继承

.pub{
width: 100px;
height: 100px;
background: red;
}
/*
* LESS中的extend继承并不是copy代码，而是让当前的样式类和继承的样式类公用一套样式（编译为群组选择器的方式）
*/
.box:extend(.pub){
background: green;
}
//或者
.box{
&:extend(.pub);//=>原理是一样的，也是把它放在.box的末尾
background: green;
}
//结果
.box
.pub{
width: 100px;
height: 100px;
background: red;
}
 
/*真实项目中，如果想使用extend实现继承，我们一定都把需要继承的样式类写在最外层（而不是里层私有作用域），如果想继承当前私有作用域的某个样式类，需要把前缀都准备好*/

LESS中的条件和递归

条件

常用的条件运算符：>、>=、<、<=、=； 
设定的条件还可以使用IS函数： 
iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage…

.pub(@x) when(@x<=10){
width: 100px;
height: 200px;
}
.pub(@x) when(@X>10){
width: 200px;
height: 400px;
}
.box{
.pub(20);
background: green;
}
//结果：
.box{
width: 200px;
height: 400px;
background: green;
}

 

递归

.columns(@i) when(@i<=4){
.box@{i}{
width:unit(@i*10,%);
}
.columns(@i+1);
}
.columns(1);
//结果：
.box1{
width:10%;
}
.box2{
width:20%;
}
.box3{
width:30%;
}
.box4{
width:40%;
}

LESS中的连接符和import

@import "reset.min.css";
//=>在自己的less中把reset导入进来
@import (reference) "public";
//=>加了reference导入进来使用，但是不编译里面的代码
 
.box {
　　.mark { //=> .box .mark
 
　　}
　　//&:在.box后面紧跟着谁
　　&.pp { //=>.box.pp
　　　　background: red;
　　}
　　& > .mm {
　　　　background: green;
　　}
　　&:hover {
　　　　background: orange;
　　}
}

让你快速进行web前端开发的途径-LESS学习:了解LESS和编译LESS

http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-22/527.html

通过LESS的基础语法的学习,提高web前端开发的效果

http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-22/528.html