less简介

Less是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“style.less”，他也能正常工作。

编译less

1.使用js

<link rel="stylesheet/less" type="text/css" href="css/style.less" >
<script type="text/javascript" src="js/less-1.3.3.min.js"  data-env="development" ></script >//网上可下载

2.Koala编译工具
koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行
官网地址http://koala-app.com/index-zh.html
3.使用第三方工具gulp grunt等
less语法

变量

//less
@color:#333;
header{
    color:@color;
}

/*css*/
header{
    color:#333333;
}

 混合--在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性

//less
.bd50{
  border-radius: 50%;
}
.yuan{
width:100px;
height:100px;
background:red;
.bd50
}

/*css*/
.yuan{
width:100px;
height:100px;
background:red;
border-radius: 50%;
}

//html代码
<div class="yuan"></div>

 效果

带参数混合--像函数一样定义一个带参数的属性集合，然后在另一个class中去调用这些属性。

//less
/*classA：设置圆角角度为50px*/
.radius(@radius: 50px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
/*classB：设置阴影颜色大小*/
.boxShadow(@boxShadowColor:0 0 10px rgba(0, 204, 204, .5)){
    -webkit-box-shadow:@boxShadowColor;
    -moz-box-shadow:@boxShadowColor;
    box-shadow:@boxShadowColor;
}
/*classC：调用A、B*/
.tableBorder{
    border : 5px solid 5px solid #ffff00;
    background: #ffc0cb;
    width: 200px;
    height: 200px;
    padding: 0;
    margin:0;
    text-align: center;
    line-height: 200px;
    .boxShadow;
/*在classC中调用classA、B  带值带括号  括号内给值，执行括号内的数据*/
    .radius();
}

 

/*css*/
.tableBorder {
  border: 5px solid #ffff00;
  background: #ffc0cb;
  width: 200px;
  height: 200px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  line-height: 200px;
  -webkit-box-shadow: 0 0 10px rgba(0, 204, 204, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 204, 204, 0.5);
  box-shadow: 0 0 10px rgba(0, 204, 204, 0.5);
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
}

 

 //html代码
<div class="tableBorder">我是一个带参数混合的正方形</div>
      

效果

 @arguments变量--@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

//less
.arguments{
    width: @width200;
    height: @width200;
    margin: 30px;
    .box-Shadow();
}
.box-Shadow(@x:0,@y:0,@blur:1px,@color: rgba(215, 22, 185, .5)){
//包含传进来的所有参数
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
}

/*css*/
.arguments {
  width: 200px;
  height: 200px;
  margin: 30px;
  box-shadow: 0 0 1px rgba(215, 22, 185, 0.5);
  -moz-box-shadow: 0 0 1px rgba(215, 22, 185, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(215, 22, 185, 0.5);
}

//html代码
<div class="arguments">arguments变量</div>

嵌套--可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

//less

 .list{
    width: 100%;
    padding: 0;
    margin: 30px auto;
    list-style: none;
    li{
        height: 30px;
        line-height: 30px;
        margin-bottom: 5px;
        background: pink;
        padding: 0 10px;
//这样写也可以 但是要进行更深层次的匹配 影响效率
        /*a{
            color: #666;
            text-decoration: none;
            padding-left: 20px;
        }*/
    }
    a{
        color: #666;
        text-decoration: none;
//&：代表他的上一层选择器
        &:hover{
            color: #3a87ad;;
            text-decoration: underline;
        }
    }

    span{
        float: right;
    }
}

 

/*css*/
.list {
  width: 100%;
  padding: 0;
  margin: 30px auto;
  list-style: none;
}
.list li {
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
  background: pink;
  padding: 0 10px;
}
.list a {
  color: #5bc0de;
  text-decoration: none;
}
.list a:hover {
  color: #3a87ad;;
  text-decoration: underline;
}
.list span {
  float: right;
}

 

//html代码
      <div class="qiantao">
        <ul class="list">
            <li><a href="#">这是一个测试嵌套的代码</a><span>2012-04-02</span></li>
            <li><a href="#">这是二个测试嵌套的代码</a><span>2012-04-02</span></li>
            <li><a href="#">这是三个测试嵌套的代码</a><span>2012-04-02</span></li>
        </ul>
      </div>

匹配模式--有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：

//less
//朝上
//宽度默认5，颜色默认灰色
.triangle(top,@w:100px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
//朝下
.triangle(bottom,@w:100px,@c:#ccc){
    border-width: @w;
    border-color:@c transparent transparent  transparent;
    border-style:solid dashed dashed  dashed;
}
//朝左
.triangle(left,@w:100px,@c:#ccc){
    border-width: @w;
    border-color: transparent @c transparent  transparent ;
    border-style: dashed solid dashed dashed ;
}
//朝右
.triangle(right,@w:100px,@c:#ccc){
    border-width: @w;
    border-color: transparent  transparent  transparent @c ;
    border-style: dashed  dashed dashed  solid;
}
//特殊匹配模式 不管匹配谁都会执行@_的内容
.triangle(@_,@w:100px,@c:#ccc){
    width: 0px;
    height: 0px;
    overflow: hidden;
}
.sanjiao{
    .triangle(left);
}

 

/*css*/
//由于调用的“left”，所以只会编译left的样式
.sanjiao {
  border-width: 100px;
  border-color: transparent #cccccc transparent transparent;
  border-style: dashed solid dashed dashed ;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

 

 //html代码
<div class="sanjiao"></div>