less 入门1
less.html
<!DOCTYPE html>
<html lang="zh-cn">
<head > <meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bootstrap</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="../styles/site.less">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.bootstrap"></script>
<script src="../bootstrap/respond.min.bootstrap"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js" ></script>
<script src="../scripts/less.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<h2 class="page-header">less 动态样式语言，可在客户端运行，也可借助node.js在服务器端运行</h2>
<p>变量、继承，运算，函数</p>
<p>less可以继承，即在页面多处引用同个样式时，可使用继承来解决</p>
<h1 class="border">变量： @color:#abcdef;</h1>
<div class="div1">h2{color:@color;}</div>
<div class="div2"> 混合</div>
<div class="div3"> .myStlye{}</div>
<div class="div4"> H2{.myStyle}</div>
<div class="div5">test5</div>
<div class="div6">test6</div>
<hr/>
<div class="div7">
this is div7
<h1>h1</h1>
<h2>this is h2<a href="#">view</a></h2>
</div>
<hr/>
<!--<article>
<h3>less入门<small>with webstorm</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>-->
<div class="div8">
任何数字、颜色 或者变量都可能参与运算
</div>
<div class="div9">
命名中间 使用公司名
</div>
<div class="div10">
作用域越小，优先级越高
</div> day05 am 01.25.53
</div>
</body>
</html>
site.less
@color: red;
@gColor: green;
@myFavor: 'color'; h2 {
color: @color;
} p {
color: @color+#111;
} h1 {
color: @@myFavor; /*先 @myFavor 找到 color 再@一次，找到@color */
} //混合
.border {
border: 1px solid @color;
} .div1 {
.border; // 直接引用其他样式 mixin 混合
color: green;
} //混合参数
.border2(@width:1px) {
border: @width solid @gColor;
} .border-radius(@radius:5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
} //带参混合
.padding1(@top:15px,@right:10px,@bottom:25px) {
// 15px 为默认值
//多参数
padding: @arguments; // 直接调用多参数
padding-left: 8px;
} .div2 {
.border2;
.border-radius(10px);
.padding1; // 带参混合
} //模式匹配（重载）
.mixin(dark,@c:@gColor) {
//@c 是变量 @gColor是引用值
color: darken(@c, 10%); // 调用函数 把 @c 颜色变深10%
} .mixin(light,@c:@gColor) {
color: lighten(@c, 10%); // 调用函数 把 @c 颜色变浅10%
} .div3 {
.mixin(dark); //效果不明显
} @myColor: pink;
/*
.div4(@c:@myColor){ // @c 是形参 @myColor 是默认值
color:@c;
}*/
//不能直接调用带参数的
.myStyle(@c:@myColor) {
color: @c;
} .div4 {
.myStyle; // .myStyle(); 加括号也可以
} .myStyle2(@c) {
color: @c;
} .div5 {
.myStyle2(blue); // 这里不需要双引号
} //引导模式 不要引用 bootstrap 就有效果。。
/*
.mixin(@a) when(lightness(@a)>=50%){
background-color: black;
}
.mixin(@a) when(lightness(@a)<=50%){
background-color: white;
} .div6{
.mixin(#888); }
*/
.div7{ // 各种嵌套
color:red;
h1{ color:@gColor;}
h2{color:blue;
a{color:pink; &:hover{color:#000;}}
}
} @base-font-size:10px;
@base-color:#888;
.div8{
font-size: @base-font-size * 4; // 直接 *
color:@base-color /4;
background-color: @base-color + #222;
} //命名中间
#google{
.h{
background-color: red;
}
}
#microsoft{
.h{
background-color: green;
}
}
.div9{
#google > .h;
}
@imgUrl:"../img";
.div10{
background: url("@{imgUrl}/1.png") no-repeat;
width:300px;
height: 300px; }