通常我们在制作网页时,要写一大堆的类名(class),如果嵌套太多,写起来就很麻烦,可是如果我们用less这样的编译工具的话,就可以给我们减轻很多负担了,省时,又省力,下面就来看看吧!
一、LESS
解释:它是一种动态样式语言,LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数, LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。1.变量
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能
只需要修改几行代码就可以了。
<div class="box2">
<p>这是第二段文字,关于变量的问题</p>
<span>今天是一个好日子
<i>变量的问题</i>
</span>
<ol class="clearfix">
<li>
<a href="">1</a>
</li>
<li>
<a href="">1</a>
</li>
<li>
<a href="">1</a>
</li>
<li>
<a href="">1</a>
</li>
</ol>
</div>
@color:#cc0000;
// 变量
.box2{
p{
font-size:18px;
color:@color;
height:30px;
}
span{
color:#333;
font-size:16px;
display:block;
margin-top:20px;
i{
font-size:12px;
color:@color;
}
}
// 列表
ol{
width: 440px;
height: 125px;
margin: 0 auto;
border: 1px solid #f00;
li{
float:left;
width:90px;
height:100px;
background:#969652;
text-align:center;
line-height:100px;
margin:10px 10px;
a{
font-size:14px;
color:@color;
}
a:hover{
font-size:14px;
color:#333;
text-decoration: underline;
}
}
}
}
2.混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有
属性。我们还可以带参数地调用,就像使用函数一样。
<div class="box3">
<p>
这是关于less混合的使用
<span>混合坚果</span>
<i>混合小中心</i>
</p>
</div>
<div class="box4">
<p>122</p>
</div>
<footer>
收尾啦,学习完less啦!
</footer>
.rounded-corners(@radius:5px){
border-radius:5px;
-moz-border-radius: @radius;
-webkit-border-radius:@radius;
}
.box3{
border:1px solid #ccc;
width:420px;
height:350px;
p{
width: 300px;
height: 240px;
background: #bebedc;
margin: 0 auto;
text-align:center;
.rounded-corners;
span{
display:block;
font-size:13px;
color:@color;
text-align:center;
margin:20px;
}
i{
display:block;
width:100px;
height:100px;
background:pink;
margin:0 auto;
.rounded-corners(10px);
line-height: 100px;
}
}
}
3.嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的
清晰。
<div class="navBox1">
<p class="navP">这是一个传奇的故事</p>
<span>故事要从1920年说起啦</span>
<i>那天阳光明媚,微风习习,天空澄澈</i>
<span class="navSpan">空气中洋溢着一股魔卡龙的香甜味道</span>
<p class="navp2">没有任何一个女人
不加修饰就能与岁月抗衡
聪明的女人总是懂得内外兼修
没有自然美
只有美得自然</p>
<p class="navp3">生活中有许多事是我们都无法预料和猜测的,你比如说</p>
<p class="pic1"><img src="img/1.jpg" alt=""></p>
<strong>那是一个激励人振奋人的时代,每个人像打了鸡血似的为生活奔波,阳光是那么刺眼,舒服</strong>
<ul class="list1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="floatBox clearfix">
<div class="left-1 fl">
<p><img src="img/w3.jpg" alt=""></p>
<i>奶味少女</i>
<span>le27323leyan</span>
</div>
<p class="right-1 fr">
<span>第一次学习Less,以前自己太懒啦
</span>
</p>
</div>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
.navBox1{
font-size:12px;
background:#f1f1f1;
// width:1000px;
.navP{
font-size:16px;
// color:#333;
margin:10px;
}
span{
color:#f60;
font-size:12px;
}
i{
color:#0f0;
font-size:12px;
}
.navSpan{
font-size: 16px;
color: aqua;
}
.navp2{
color:#969652;
font-size: 18px;
margin:10px;
}
.navp3{
color:#00f;
font-size: 16px;
margin:15px;
}
.pic1{
width:300px;
height:300px;
margin: 0 auto;
img{
width:100%;
height:100%;
}
}
strong{
font-size: 13px;
color:#000;
margin:10px;
width:350px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display:block;
}
ul{
border:1px solid #ccc;
width:402px;
height:402px;
margin:0 auto;
li{
width:402px;
height:50px;
}
li:nth-child(odd){
background:pink;
}
li:nth-child(even){
background:lightgreen;
}
}
.floatBox{
width: 1000px;
height: 400px;
margin: auto;
.left-1{
width:398px;
height:300px;
float:left;
text-align:center;
p{
width:300px;
height:300px;
margin:5px auto;
img{
width:100%;
height:100%;
border-radius:50%;
}
}
i{
display:block;
width:100px;
font-size:14px;
color:#333;
margin:10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin:10px auto;
}
span{
display:block;
width:80px;
font-size:14px;
color:#e01b3d;
margin:10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin:10px auto;
}
}
.right-1{
width:600px;
height:400px;
background:#ff0;
text-align:center;
border-left:1px solid #ccc;
span{
display:block;
font-size: 18px;
color:#333;
padding: 20px;
}
}
}
ol{
border:1px solid #ccc;
width:1000px;
height:250px;
margin:0 auto;
li{
width:230px;
height:230px;
background:peru;
margin:10px 10px;
float:left;
text-align:center;
line-height:230px;
font-size:25px;
font-weight:bold;
color:#fff;
}
}
}
4.函数 & 运算
运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。
LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值
<div class="box4">
<p>122</p>
</div>
<footer>
收尾啦,学习完less啦!
</footer>
@the-border:1px;
@base-color:#111;
@red:#cc0000;
.box4{
border:1px solid #ccc;
width:300px;
height:300px;
color:@base-color * 3;
border-left:@the-border;
border-right:@the-border * 5;
}
footer{
color: @base-color + #000;
border-color: desaturate(@red, 10%);
}
用的时候还是一样的,新建一个.css文件,新建一个.less文件,然后在html中引入.css,但是写样式在.less里面去写,完了把.less文件删除即可。
<link rel="stylesheet" href="css/main.css" />
由于时间有限,暂且搁笔,下次有时间再好好写写,如有什么问题,请朋友们提出宝贵意见,谢谢,一起进步!