混合
1、定义一个带参数的属性集合
LESS:
.bg-blue () {
background-color: blue;
}
.main {
width: 100%;
height: 300px;
.bg-blue;
}
CSS:
.main {
width: 100%;
height: 300px;
background-color: blue;
}
2、
LESS :
.border (@a: 0, @b: solid, @c: #000) { @d: @a @b @c;
box-shadow: @d;
-webkit-box-shadow: @d;
-moz-box-shadow: @d;
}
.box { @base: #f938ab;
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div {
.border(1, solid,#000)
}
}
CSS:
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
box-shadow: 1 solid #000;
-webkit-box-shadow: 1 solid #000;
-moz-box-shadow: 1 solid #000;
}
3 、
LESS:
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
.main {
.boxShadow(2px,2px,3px,#f36);
}
.top {
.boxShadow(5px,5px,6px,#f60);
}
CSS:
.main {
box-shadow: 2px 2px 3px #f36;
}
.top {
box-shadow: 5px 5px 6px #f60;
}
Functions & Operations
1、
LESS:
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color *3;
border: 1px solid desaturate(@red,100%);
border-width: @the-border @the-border*2 @the-border*3 @the-border;
border-color:desaturate(@red,100%) @red lighten(@red, 10%) darken(@red, 30%);
}
CSS：
#header {
color: #333;
border: 1px solid #4a4a4a;
border-width: 1px 2px 3px 1px;
border-color: #4A4A4A #842210 #B12E16 #000000;
}
2 、
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
练习
HTML :
<div id="top">
<div class="top-nav">
<div class="f-l">
<a href="">菜单一</a>
<a href="">菜单二</a>
<a href="">菜单三</a>
<a href="">菜单四</a>
</div>
<div class="f-r">
<a href="">菜单五</a>
<a href="">菜单六</a>
<a href="">菜单七</a>
<a href="">菜单八</a>
</div>
</div>
<div class="top-img">
<div class="top-con-bg">
<div class="top-content">
<span href="">Hello world!</span>
</div>
</div>
</div>
</div>
<div id="main">
<div class="pic-detail">
<ul>
<li><a href=""></a></li>
<li>
<a href="">
<ul>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
<li>555555555555</li>
</ul>
</a>
</li>
<li>
<a href="">
<ul>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
<li>555555555555</li>
</ul>
</a>
</li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<div id="foot">
<div class="footer">
<P>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</P>
</div>
</div>
LESS :
@blue:#191970;
@lightblue:#4169E1;
@white:#fff;
.td-none {
text-decoration: none;
}
body {
margin: 0;
padding: 0;
font-size: 14px;
color: #000;
}
.txt {
width: 100px;
height: 30px;
text-align: center;
display: block;
float: left;
line-height: 30px;
color: @white;
.td-none;
}
.f-l {
float: left;
}
.f-r {
float: right;
}
.size {
width: 500px;
height: 500px;
}
#top {
width: 100%;
background-color: @blue;
overflow: hidden;
.top-nav {
width: 1000px;
margin: 0 auto;
overflow: hidden;
background-color: @lightblue;
.f-l {
a {
.txt;
}
}
.f-r {
a {
.txt;
}
}
}
.top-img {
width: 100%;
margin: 0 auto;
height: 400px;
background: url(../images/7adb7f4e8f5a6aa62c9f3c4ddd950bc6.png) no-repeat;
.top-con-bg{
width: 1000px;
height: 100%;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.3);
padding-top: 50px;
.top-content {
width: 800px;
margin: 0 auto;
border: 5px solid #fff;
text-align: center;
padding: 125px 0;
span {
font-size: 40px;
color: @white;
}
}
}
}
}
#main {
width: 100%;
overflow: hidden;
background-color: lighten(@blue, 60%);
.pic-detail {
width: 1000px;
margin: 0 auto;
overflow: hidden;
ul{
list-style-type: none;
margin: 0;
padding: 0;
li {
float: left;
.size;
a {
background-color: @white;
display: block;
.size;
ul {
width: 420px;
height: 420px;
padding: 40px 0;
li {
height: 62px;
line-height: 62px;
font-size: 40px;
color: @white;
margin: 11px 0;
background-color: #483D8B;
padding: 0 20px;
}
}
img {
.size;
}
}
}
}
}
}
#foot {
width: 100%;
.footer {
width: 1000px;
margin: 0 auto;
p {
line-height: 30px;
height: 30px;
text-align: center;
}
}
}
CSS：
.td-none {
text-decoration: none;
}
body {
margin: 0;
padding: 0;
font-size: 14px;
color: #000;
}
.txt {
width: 100px;
height: 30px;
text-align: center;
display: block;
float: left;
line-height: 30px;
color: #fff;
text-decoration: none;
}
.f-l {
float: left;
}
.f-r {
float: right;
}
.size {
width: 500px;
height: 500px;
}
#top {
width: 100%;
background-color: #191970;
overflow: hidden;
}
#top .top-nav {
width: 1000px;
margin: 0 auto;
overflow: hidden;
background-color: #4169E1;
}
#top .top-nav .f-l a {
width: 100px;
height: 30px;
text-align: center;
display: block;
float: left;
line-height: 30px;
color: #fff;
text-decoration: none;
}
#top .top-nav .f-r a {
width: 100px;
height: 30px;
text-align: center;
display: block;
float: left;
line-height: 30px;
color: #fff;
text-decoration: none;
}
#top .top-img {
width: 100%;
margin: 0 auto;
height: 400px;
background: url(../images/7adb7f4e8f5a6aa62c9f3c4ddd950bc6.png) no-repeat;
}
#top .top-img .top-con-bg {
width: 1000px;
height: 100%;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.3);
padding-top: 50px;
}
#top .top-img .top-con-bg .top-content {
width: 800px;
margin: 0 auto;
border: 5px solid #fff;
text-align: center;
padding: 125px 0;
}
#top .top-img .top-con-bg .top-content span {
font-size: 40px;
color: #fff;
}
#main {
width: 100%;
overflow: hidden;
background-color: #c8c8f3;
}
#main .pic-detail {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#main .pic-detail ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#main .pic-detail ul li {
float: left;
width: 500px;
height: 500px;
}
#main .pic-detail ul li a {
background-color: #fff;
display: block;
width: 500px;
height: 500px;
}
#main .pic-detail ul li a ul {
width: 420px;
height: 420px;
padding: 40px 0;
}
#main .pic-detail ul li a ul li {
height: 62px;
line-height: 62px;
font-size: 40px;
color: #fff;
margin: 11px 0;
background-color: #483D8B;
padding: 0 20px;
}
#main .pic-detail ul li a img {
width: 500px;
height: 500px;
}
#foot {
width: 100%;
}
#foot .footer {
width: 1000px;
margin: 0 auto;
}
#foot .footer p {
line-height: 30px;
height: 30px;
text-align: center;
}
