首页 > 代码库 > 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--简单使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。