less的安装以及使用

phpstorm上安装less

1、现在电脑上利用node下载下来less（关键是要使用到lessc.cmd）
2、在phpstorm上配置less，使得可以自动的编译less文件
ctrl+alt+s调出filewatcher窗口
按照如图所示的配置可以配置成功

客户端和服务器端使用less

客户端使用less的时候可以在直接引入less文件

   <link href="less/styles.less" rel="stylesheet/less">       <script src="scripts/less.min.js"></script>

然后再通过less.js来解析
服务器端使用less，主要是借助less的编辑器，生成最终的css文件

less的原理及使用方式

less的使用多用于定义主题的颜色，字体 值级别的复用
less文件

@color: red;#header{  color: @color;}h2{  color: @color;}@init:#111111;@cc:"init";.dd{  color:@@cc;}

css文件

#header{color:red}h2{color:red}.dd{color:#111111}

定义子类和父类的样式，局部和全局变量的使用，同时体现的是两种读取变量的方式，以及less文件中再出现@init的定义的值的时候就会覆盖#111111
less

@width:20px;#header{    @width:30px;  #dev{    width: @width;  }}#cc{  width: @width;}

css文件

#header #dev{width:30px}#cc{width:20px}

Mixins(混入)

一个class中引入另外一个已经定义了的class中,也就是规则级别的复用,可以传入初始值，
less文件

.roundConers(@radius:5px){  border-radius: @radius;  -webkit-border-radius: @radius;  -moz-border-radius: @radius;}#header{   .roundConers;}#footer{  .roundConers(10px)}

生成的css文件

#header{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px}#footer{border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px}

当想隐藏输出的css规则，但又想在别的规则中包含他的属性，也可以不传入参数，

使用arguments参数
less文件

.roundConers(@x:0,@y:1,@blur:1px,@color:#000){  box-shadow: @arguments;  -webkit-box-shadow: @arguments;  -moz-box-shadow: @arguments;}#header{   .roundConers;}#footer{  .roundConers(2px,3px,3px,red)}

css文件

#header{box-shadow:0 1 1px #000;-webkit-box-shadow:0 1 1px #000;-moz-box-shadow:0 1 1px #000}#footer{box-shadow:2px 3px 3px red;-webkit-box-shadow:2px 3px 3px red;-moz-box-shadow:2px 3px 3px red}

less书写子类的嵌套规则和html的嵌套规则是一致的

&的使用

同一个元素或者是系元素的伪类
less

a{  color:red;  text-decoration: none;  &:hover{    color:green;    text-decoration: underline;  }}

css

a{color:red;text-decoration:none}a:hover{color:green;text-decoration:underline}

运算以及函数