Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
使用时,需要引入less.js文件,
1.site.less文件,定义了一些样式
@bColor:teal;//定义变量:bColor
@oColor:orange;
//模式匹配(方法重载)@c参数名:@bColor为默认值
.mixin(dark, @c:@bColor){
//darken自带函数,变暗10%
color:darken(@c,10%);
}
.mixin(light, @c:@bColor){
//lighten自带函数,变亮10%
color:lighten(@c,10%);
}
//声明默认宽度1px
.bordered(@width:1px){
//dotted:点线
border:@width dotted @bColor;
}
//圆角5px
.border-radius(@radius:5px){
-moz-border-radius:@radius;
-webkit-border-radius:@radius;
border-radius:@radius;
}
//带参混合
.box-shadow(@x:5px,@y:5px,@c:@bColor){
box-shadow:@arguments;
.mixin(light,@c);
margin-bottom:5px;
}
//引导模式,混合带入(在一个样式中调用另一个样式)
.mixin(@a) when(lightness(@a)>=50%){
background-color:black;
}
//亮度小于50%将背景色设置为白色
.mixin(@a) when(lightness(@a)<=50%){
background-color:white;
}
header{
//color指向oColor,而oColor是orange,所以最终的颜色为orange
color:@oColor;
h1{ color:@bColor; }
h2{ color:#f00;
a{ color:#0f0;//(同级)本级的hover属性鼠标放在上面变为红色
&:hover{color:#f00;}
}
}
}
footer,article,aside,section,hgroup,div,nav{
.mixin(#888);
.mixin(light,@bColor); //模式匹配(重载)
//调用.border
.bordered(2px); //mixin 带参数混合
.border-radius(5px);
.box-shadow();
}
2.html代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- 页面编码 -->
<meta charset="UTF-8">
<!-- 响应式布局 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- 自定义样式文件 -->
<link rel="stylesheet/less" type="text/css" href="styles/site.less">
<!-- Jquery脚本文件 -->
<script src="scripts/jquery.min.js"></script>
<!-- less脚本文件 -->
<script src="scripts/less.js"></script>
<!-- Bootstrap脚本插件文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- 标签名称 -->
<title>index</title>
</head>
<body class="container">
<header class="page-header">
this is header
<h1>index</h1>
<h2>
less demo
<a href="#">view</a>
</h2>
</header>
<div>
<article>
<h3>less入门<small>with aptana</small></h3>
<section>
<p>less是一种动态样式语言</p>
<aside>
<a href="#">了解更多</a>
<blockquote>
来自W3C标准
<cite><a href="http://w3c.com">w3c</a></cite>
</blockquote>
</aside>
</section>
</article>
<br><br>
</div>
<footer class="navbar-fixed-bottom text-center">© 2015</footer>
</body>
</html>
3.效果图: