less 学习笔记入门
CSS预处理器中Less的语法最接近原生CSS，学习成本比较低，语法比较简单，并且能够在浏览器客户端中预览，我这里只是简单的作为搭建less开发环境，可以在工作中熟练less相关的API和属性方法。
@border_color:#eee;
@item_height:45px;
@item_padding_width:60px;
.hb_list_container{
display: block;
.hb_item_container{
border-bottom: 1px solid @border_color;
height: @item_height;
line-height: @item_height;
position: relative;
&.hb_icon_right{
padding-right: @item_padding_width;
.iconfont:first-child{
position: absolute;
top: 0px;
right: 0px;
line-height: @item_height;
}
}
&.hb_icon_left{
padding-left: @item_padding_width;
.iconfont:last-child{
position: absolute;
top: 0px;
left: 0px;
line-height: @item_height;
}
}
}
}备注：
语法参考 http://www.lesscss.net/features/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet/less" type="text/css" href="less/list_icon.less">
<link rel="stylesheet" href="public/css/hb_wap.css">
<script src="public/js/less.js" type="text/javascript"></script>
<title>list icon 组件</title>
</head>
<body>
<div class="hb_list_container">
<div class="hb_item_container">
dsaf
</div>
<div class="hb_item_container">
dsaf
</div>
<div class="hb_item_container hb_icon_right">
dsaf
<span class="iconfont icon"></span>
</div>
<div class="hb_item_container hb_icon_left hb_icon_right">
<span class="iconfont icon"></span>
dsaf
<span class="iconfont icon"></span>
</div>
<div class="hb_item_container hb_icon_left">
dsaf
<span class="iconfont icon"></span>
</div>
</div>
</body>
</html>1、引用less文件的方式
<link rel="stylesheet/less" type="text/css" href="less/list_icon.less">
2、引用对less解析的js函数
<script src="public/js/less.js" type="text/javascript"></script>
相关推荐
前端 2020-08-03
骷髅狗 2020-08-02
wghou 2020-06-21
wghou 2020-06-16
覆雪蓝枫 2020-06-16
骷髅狗 2020-06-14
骷髅狗 2020-06-12
sixyearsorless 2020-05-27
zhanghaibing00 2020-05-27
maiktom 2020-05-26
比格杰森 2020-05-26
e度空间 2020-05-17
maiktom 2020-05-11
buttonChan 2020-05-10
Enjoyendless 2020-05-08
sixyearsorless 2020-05-07
骷髅狗 2020-04-24