less，变量，嵌套，函数方法-原创手记-慕课网

css不是编程语言，而是标记语言；

less是编程语言预处理编程语言，所有具有变量，封装，多态等；

less预处理预编译的思想是：less写完的样式，不能直接应用于浏览器，因为浏览器不识别，我们需要转化为css才可以应用于浏览器；

less使用的两种方法：
--------------

node 环境编译less安装 npm install -g less；
在css文件中打开cmd命令：执行：lessc index.less  index.css；
执行：lessc index.less  index.css -x：编译后进行压缩；
检测less是否检测成功： lessc -v

浏览器引用less,
定义一个index.less,《link rel=‘stylesheet/less’ src='index.less'》在引入less.min.js；

<script>
    // less 的监听模式，1s后自动刷新页面
      var less = {
       env:'development',
        poll: 1000,//在间隔模式下多久一次刷新
       }
</script>
<script src='js/less-2.3.2.min.js'></script>
<script>
    less.watch()
</script>

less语言定义：

导入import

import (reference) 'commont';// 导入公共的样式；
// reference  只引入公共的方法，但不编译；

变量

@color-58：#585858；
@url:'../img/banner/'

.publick{// .publick方法没有加（）；可以当做样式用，也可以给别人用；.publick如果加了（）,就不能当做样式使用，只能当做方法调用；
    width:100px;
    height:100px；
}

.box{
.publick;//box我们在这里征用了.publick函数的样式；
color:@color-58
background:url('@{url}/p1.png') no-repeat;//url地址我们需要用{ }包起来；
}

.box2:extend(.public){  // extend连字符公用     保证.public方法不加括号；

}
// 编译后的结果（公用）
.box2,.public{
    width:100px;
    height:100px;
}

函数

// @property:all定义变量默认值；
transition(@property:all,@duration:1s,@time-function:linear,@delay:0s){
-webkit-transition:arguments;
-moz-transition:arguments;
-ms-transiton:arguments;
-o-transition:arguments;
transition:arguments;
}

.box{
.transition(@duration: 0.3s)；// 指定我们传递的变量值；
}

less 方法

color方法
@col: '#000';
background: color(@col);

data-uri方法
data-uri:讲图片进行base64转码，图片优化，不用向服务器发送请求；对于大的图片less中不能进行base64；(tool.css-js.com)项目中慎用base64编码，代码太多；
@url:'../img/swiper'
background:data-uri('@{url}/page1.png') no-peate;

unit方法：添加和删除单位
@w100:100px
.box{
width: unit(unit(@w100)-50,px);// unit(@w100) -50 去除单位向减； 然后在添加单位
}

extract方法 ：提取
@color: #000,#333,#fff,#ccc,#eee;
.box{
background:extract(@color,length(@color))// 提取最后一个颜色
}

floor，ceil，percentage，abs，round，pow，sprt，mod（取余数）
floor：
参数：number
实例：floor（3.2）
输出：4

mod：
实例：mod（4,2）
输入：0

percentage：
参数：number 浮点数
实例： percentage（0.5）
输入：50%

嵌套

.box{
   .div{
     position:fixed;
     span{}
    }
}

运算

.average(@x,@y){
    @result:((@x+@y)/2);// @resul表示返回值
}
.box{
.average(10,2);// 方法执行；
z-index：@result；//返回值
}

// 常用的条件判断
使用IS 函数：iscolor，isnumber，isstring，iskeyword，isurl等
.public （@y） when （iscolor（@y））{
backgroud-color：#000；
}
.public (@x)  when （@x<10） and (@x>0)）{
background-color：#ededed；
}

.box{
.public (red)
}

作用域

@v:1
.box{// box是命令空间，{}里面就是私有的作用域
    @v:10;
    z-index:@v
}