LESS的作用

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

LESS的编译

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

开发环境

在本地开发中这是开发环境 

生产环境 

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

在开发环境下，我们一般都通过导入LESS插件（less-2.5.3.min.js）来随时编译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{
      }width: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;　　}}

 

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

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