欢迎使用CSDN-markdown编辑器

css-less框架

1. less的使用

   1. 使用在大型网站开发中，便于第二次开发

   2. 关键字@；使用方式@+变量：值；在调用赋值时直接赋值@+变量名。如：

      #header{height: 200px;width: 200px;background-color: @color;

      }
      p{
      color: @color;
      }

   3. 具有加、减、乘、除4种运算
      加法

      
      @number:100px;
      .first{
      background-color: red;
      width: @number+100px;
      height: @number+100px;
      }

      乘法

  @number:100px;  .first{    background-color: red;    width: @number*4;    height: @number*4;  }

2：
Mixin——掺合模式（Mixin）混合/混入是定义可以重复使用的代码块
混合模式案例：

.set-init(@color:red,@size:10px){
background-color: @color;
font-size: @size;
}

#header{
height: 200px;
width: 200px;
.set-init
}
p{
.set-init
}

3：内嵌规则
案例3：

<div id="header">      <div>      <ul>           <li>登录</li>            <li>注册</li>      </ul>      </div>     <p>hello world</p></div>

css中的写法：

#header div{
width: 200px;
height: 200px;
background-color: red;
}
#header ul li{
float: left;
list-style: none;
margin-left: 10px;
margin-right: 10px;
}
#header p{
color: blue;
}

用less写

@color:red;
@min-div_width:200px;
@min-div-height:200px;
@min-margin:10px;
#header{
div{
height: @min-div-height;
width: @min-div_width;
background-color: @color;

  ul li{      float: left;      list-style: none;      margin-left: @min-margin;      margin-right: @min-margin;  }}p{  color: @color;}

}

额外收获

在鼠标指向一个元素时我们在鼠标所在位置创建一个提示：
title=”提示语”;如：

holle wold

当鼠标指向a标签时在鼠标下方显示一个框内容为Twitter