|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
破洛洛文章简介:lesscss是静态的款式表言语,他让css增添变量,组合,函数,运算等语法。这个项目标网站在国际会见不到,人人都懂的。
lesscss是静态的款式表言语,他让css增添变量,组合,函数,运算等语法。这个项目标网站在国际会见不到,人人都懂的。
lesscss利用办法有两种:
1.页面增加一个less.js的文件,css利用style.less文件后缀来编写,不外必要有服务器的情况撑持
<linkrel="stylesheet/less"type="text/css"href="styles.less">
<scriptsrc="less.js"type="text/javascript"></script>
2.在服务器端利用node.js来编译,node.js利用less的办法以下:
先利用npm保证理器来安装
$npminstallless
然后就能够利用命令行来编译紧缩less代码了
$lesscstyles.less>styles.css
上面是一些lesscss的语法:
利用变量
//LESS
@color:#4D926F;
#header{
color:@color;
}
h2{
color:@color;
}
/*CompiledCSS*/
#header{
color:#4D926F;
}
h2{
color:#4D926F;
}
2.组合
//LESS
.rounded-corners(@radius:5px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
#header{
.rounded-corners;
}
#footer{
.rounded-corners(10px);
}
/*CompiledCSS*/
#header{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#footer{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
3.选择器
//LESS
#header{
h1{
font-size:26px;
font-weight:bold;
}
p{font-size:12px;
a{text-decoration:none;
&:hover{border-width:1px}
}
}
}
/*CompiledCSS*/
#headerh1{
font-size:26px;
font-weight:bold;
}
#headerp{
font-size:12px;
}
#headerpa{
text-decoration:none;
}
#headerpa:hover{
border-width:1px;
}
4.变量预算
//LESS
@the-border:1px;
@base-color:#111;
@red:#842210;
#header{
color:@base-color*3;
border-left:@the-border;
border-right:@the-border*2;
}
#footer{
color:@base-color+#003300;
border-color:desaturate(@red,10%);
}
/*CompiledCSS*/
#header{
color:#333;
border-left:1px;
border-right:2px;
}
#footer{
color:#114411;
border-color:#7d2717;
}
5.import内部css
@import"lib.less";
@import"lib";
通用援用了lesscss,我们就能够将css写得模块化,有更好的浏览性。
起首能够经由过程import讲网站的款式分红n个模块,当页面必要哪一个模块就援用哪一个。还能够将css3那些新增的功效界说成类库,因为有函数的功效,那些圆角,暗影之类款式只必要界说一次就能够了。讲页面必要利用到的次要文本,边框,背景致界说成变量给后续款式利用,到时网站作风必要改动,色彩也很好的修正。
我团体以为先阶段lesscss的不敷有:
1.css3的款式不克不及主动补全其他扫瞄器的hack。
2.利用nodejs在window体系下的撑持不敷,不外比来方才不久公布了一个nodejswindow版,这方面估量在不久的未来会改良
3.编纂器,ide对lesscss语法缩进撑持不敷友爱。
</p>
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。 |
|