css是一门标记语言，在很多情况下，为了各个模块互不干扰，我们不得不在class之前加上上一级标签限制，当我们层级嵌套多的时候，就会使得前缀过重，当然还有许多属性我们也会写4-5遍是得更好的兼容各大浏览器，我们努力使css更倾向于面向对象的编写方式，于是乎像less/sass等预编译语言为我们提供了更优越的开发方式，使我们的工作更加快捷，方便。 我们今天重点说less 那么less有那些优点呢？ 我们通过css和less对比来更好的体现出less的优点
/*css*/
.outer{
margin:50px;
width:200px;
height:200px;
border:1px solid #000;
-webkit-transform: 360deg;
-o-transform: 360deg;
-ms-transform: 360deg;
-moz-transform: 360deg;
transform: 360deg;
}
.outer .inner{
margin:50px;
width:200px;
height:200px;
border:1px solid #000;
background:lightblue;
box-shadow:0,0,10px 0 #000;
-webkit-transtion: .5s;
-o-transtion: .5s;
-ms-transtion: .5s;
-moz-transtion: .5s;
transtion: .5s;
}
outer:hover{
inner{
box-shadow:0,0 10px 0 #999;
}
}
/*less */
.transiton(@property:all,@duration:1s,@timing-function:liner,@delay:0s){
-webkit-transtion: @arguments;
-o-transtion: @arguments;
-ms-transtion: @arguments;
-moz-transtion: @arguments;
transtion: @arguments;
}
.transformRotate(@rotate:360deg){
-webkit-transform: @arguments;
-o-transform: @arguments;
-ms-transform: @arguments;
-moz-transform: @arguments;
transform: @arguments;
}
.outer{
margin:50px;
width:200px;
height:200px;
border:1px solid #000;
@shadowcolor:#000;
.transformRotate();
.inner{
margin:50px;
width:200px;
height:200px;
border:1px solid #000;
background:lightblue;
box-shadow:0,0,10px 0 @shadowcolor
.transition(@shadowcolor : .5s)
}
&:hover{
inner{
box-shadow:0,0 10px 0 lighted
}
}
}
当然less是预编译语言，我们是需要编译的 在开发环境，我们通常引入less.min.js编译文件，由于每次加载页面都需要导入less.js,并且重新编译，消耗性能，影响页面打开的速度，所以在真实的项目中，只有开发环境我们是用这种方式，生产环境下，我们肯定实现编译好，在上线，这里不再多讲。
编译less
- node 编译
- 使用编译工具（反推编译）
我们主要介绍
- less中变量
- Mixin混合
- 基本使用，嵌套规则，运算，函数，作用域等
- extend继承
- 命名空间和作用域
- !important
less中变量
- 我们可以用变量存储属性值，公用url，选择器等
- 是指变量用@[变量名]：变量值
- Less支持数学运算
- 变量名可以支持中缸（-），由于Less支持计算，所以在使用中缸的时候如果是计算，需要加括号，如
@opcity-100:100@opcity*100-2 和（@opcity*100）-2的结果是不一样的
@opcity:1;
.box{
opcity:@opcity;
filter:alpha(opcity=(@opcity*100))
}
Mixin混合 基本使用
minins 带参数的函数
mixins 设置条件
当前选择器和父级选择器&链接符
递归调用
多样式效果
我们也会用到字符串拼接
@img-url:'../../img'
background:url('@{img-url}/a.jpeg')
less可以设置型参，型参默认值，获取arguments 和获取返回值
.sum(@n:0,@m:0){
@result @n + @m
}
.box{
.sum(10,20);
width:unit(@result,'px')
//unit是less提供的方法unit([value],'px')，给value值设置单位，但如果之前有；'px',此处则是把单位去掉
}
<li>设置条件
.pub(@x) when (@x <= 10){
width:100px;
height:200px
}
.pub(@x) when (@x > 10){
width:200px;
height:400px
}
.box{
.pub(10);
}
##结果.
box{
width:100px;
height:200px
}
##我们也可以在mixin中设置条件 常用的运算符 ： >`>=`<`<=`=; 也可以使用IS函数：iscolor,isnumber,isstring,iskeyword,isurl,ispixel,ispercentge
也可以多条件
.mixin(@a;@b:0) when (isnumber(@b)){
width:100px;
height:200px
}
.mixin(@a;@b:0) when (isnumber(@b)) and (@a > 0){
width:100px;
height:200px
}
递归(less高级)
.columns(@i) when (@i <= 4)
.box@(i){
width:unit(@i * 10,%)
}
.columns(@i + 1)
}
.columns(1)
.transition(@property:all,@duration,@timing:linear,@delay:0s){
transition:@arguments;
//##等同于transition:@property,@duration,@timing，@delay);
}
.box{
.transition:(all,1s,linear,0s);
}
.box2{
.transition:(@timing:easy,@duration:1s);
}
.box{
width:50px;
.boxchidrens{ //box下所有后代为boxchidrens的元素
width:20px;
}
&.realChildren{//.box.realChildren的元素
width:30px;
}
& > .realChildren{//.box直系儿子class有realChildren的元素
width:30px;
}
&:hover{//.box:hover{}
}
/*&的意思我们可以理解为后面跟着谁*/
}
@import 'reset' 引用less文件并可以对该文件进行less编译
@import (refernce) 'public' 引用public文件，且只引用不编译
extend继承
.pub{
}
.box:extend(.pub){}
或者.box{&:extend{.pub}}
继承和混合都可以使.box拥有.pub的样式，但是混合原理是将.pub代码拷贝过来，extend的原理是将.box和.pub公用一套样式，
公用多套样式，用逗号分隔。需要注意的是
.box{
.mark{}
.inner{
&:extend(.box .mark)
//我们必须找到准确的mark的位置，制定好到底是属于谁下的class，所以在开发中一般我们会把常用的公共类写在最外层
}
}
当然我们也有更好的方法
.box{
.mark{}
.inner{
.mark;
//混合应用，在私有作用域中,可以直接用
}
}
命名空间和作用域
@a:20px;
.box{
width:@a;
@a:50px;
height:@a
}
你会发现宽高都是50px；每个大括号是个私有作用域，相对于js，，在less的私有作用域里，不仅仅是变量提升，而是变量的声明和赋值都会提前
