首页 > 代码库 > less使用ch1--简单使用

less使用ch1--简单使用

1 ku.less

.reset(){  *{margin:0;padding:0;}  ul.ol{list-style: none;}  a{text-decoration: none;}  img{border:none;} //ie6}/*.clearfix:after{  content:‘.‘;  display: block;  clear:both;}.clearfix{zoom:1;}*/.clearfix(){  &:after{    content:"";    display: block;    clear:both;  }  zoom: 1;}.bc(){  margin-left: auto;  margin-right:auto;}//浮动.fl(@dr:left){  float: @dr;  display: inline-block;}.fr(@dr:right){  float: @dr;  display: inline-block;}.font14(){  font-size:14px;}//定位.pos(r){  position: relative;}.pos(a){  position: absolute;}.pos(f){  position: fixed;}//边框三角 上 右 下 左 相当于js的if.triangle(bottom, @w:5px, @c:#ccc){ //角朝上  border-width:@w;  border-color:transparent transparent @c transparent;  border-style:dashed dashed solid dashed;}.triangle(top, @w:5px, @c:#ccc){ //角朝下  border-width:@w;  border-color:@c transparent transparent  transparent;  border-style:solid dashed dashed dashed;}.triangle(right, @w:5px, @c:#ccc){ //角朝左  border-width:@w;  border-color:transparent transparent transparent @c;  border-style:dashed dashed dashed solid;}.triangle(left, @w:5px, @c:#ccc){ //角朝右  border-width:@w;  border-color:transparent @c transparent transparent;  border-style:dashed solid dashed dashed;}.triangle(@_, @w:5px, @c:#ccc){ //@_ 始终都会匹配的,后面两个参数必须加上  width:0px;  height:0px;  overflow: hidden;}

2 a.css

body{    background-color: #fff;}

3 主 less

@charset "utf-8";//引入@import "ku";//@import "a.css"; //编译后是 @import "a.css";@import (less) "a.css"; //会想less一样导入 --注意空格 写在哪就导入到哪.reset();@td_width: 616px; //列表总宽度.tudo-main{  width:@td_width;}.title{  @h:62px;  @border_color:#222;  height:@h;  line-height: 62px;  border-top:1px solid @border_color;  margin-top:10px;  h3{    font-size: 22px;    color:#666;    font-family: "微软雅黑";    font-weight: normal;    font:22px/@h "微软雅黑"; //相当于 font-size和font-family  }  @color:#232323;  &_nav{ //相当于 .title_nav    float: right;    .font14();    color: @color;    li{      float: left;    }    a{      color:@color;      &:hover{        color:red;      }    }  }}//内容@item_mr:32px;.content{  margin-right: -@item_mr;  .pos(r);  .clearfix();}.item{  @w:130px;  @h:164px;  @img_h:78px;  width:@w;  height:@h;  .fr(left);  margin-right: @item_mr;  //item_img  &_img{    height:@img_h;    img{      width:@w;      height:@img_h;      display: block;    }  }  //item_list  &_list{    line-height: 22px;    .username,.play,.mess{      padding-left: 17px;      background-repeat: no-repeat;    }    .username{      background-image: url(../img/xxx.jpg);    }    .play{      background-image: url(../img/xxx.jpg);    }    .mess{      background-image: url(../img/xxx.jpg);    }    p{      .triangle(left);    }  }}

 

less使用ch1--简单使用