做有态度的前端团队

网易FEG前端团队

用less编写PC端上CSS3的小技巧

在说到这个小技巧前,我们首先了解less与css的区别:
CSS:
(Cascading Style Sheet)级联样式表,目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网 页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本 展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
LESS:
LESS将CSS赋予了动态语言的特性,如变量、继承、运算和函数。LESS既可以在客户端上运行 (支持IE 6 、Webkit和Firefox),也可以借助Node.js或者Rhino在服务端运行。LESS是一个动态的标准CSS样式表语言扩展,其有精简 的代码更容易维护。

我们了解完less与css的区别之后,回归正题。再举个列子就简单了解到less的强大之处了。
我们平时写css3:
.gallery_container {
opacity : 0;
transform : translateY(200px);
-ms-transform : translateY(200px);
-webkit-transform : translateY(200px);
-moz-transform : translateY(200px);
-o-transform : translateY(200px);
}

.gallery_wrap{
opacity : 0;
transform : rotateY(-30deg);
-ms-transform : rotateY(-30deg);
-webkit-transform : rotateY(-30deg);
-moz-transform : rotateY(-30deg);
-o-transform : rotateY(-30deg);
}

这样子我们写起来是不是有点麻烦和繁琐,但是如果我们采用下面这种方法去写就不一样了
首先我们定义一个函数:
.fnTransform (@prop) {
transform : @prop;
-ms-transform : @prop;
-webkit-transform : @prop;
-moz-transform : @prop;
-o-transform : @prop;
}

然后再通过这个函数在需要时候调用它:
.gallery_container {
opacity : 0;
.fnTransform(translateY(200px));
}
.gallery_wrap{
opacity : 0;
.fnTransform( rotateY(-30deg));
}

通过2种CSS3的编写方法的比较是不是更偏向于第二种,因为Less扩展了CSS的动态特性,它更像用编程语言写css

手机阅读请扫描下方二维码:

none
上一篇:负margin小结   下一篇:移动端小总结

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif