less使用ch1--简单使用

Posted 2020-09-08 码农的成长之路-Jeson

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);
    }
  }
}