快速生成CSS--LESS总结.docVIP

快速生成CSS—LESS总结 对于做一个站，css写起来真的很费时间，不是有多难，而是要在多种浏览器兼容，特别是像我这种用editplus作为工具的人，写css快不到哪里去，偶尔在博客园看到有人介绍LESS，去看了一下，真的很不错，用来生成css很方便，我说的不是用在项目中，而是用来生成css很快，平常写一些css类似函数吧，用的时候只需要调用生成，很快就可以写好类，非常方便，这个年代，时间，还有比这更宝贵的吗？ 　　使用LESS不需要什么基础，特别是编程人员，使用起来更是得心应手。在使用之前，了解一下注意地方，注释单行用//就可以了，多行用/* 注释*/，和PHP是一样的，变量用@作为开始，这里的变量其实和常量一样，只能定义一次，以后不能修改的。导入外部css或less文件用@import 文件名.css ，这里提示一下，less的文件用less作为扩展名的。如果你的页面中想引入less可以同css一样的引入方法，个人不建议这么做，虽然有人说less也很快，我建议是写好less然后生成css更好。 　　　　下面先来分享我定义的css3常用代码的less函数 ? /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } /* 盒子阴影 @right_left 右边阴影为正数 左边负数 @bottom_top 下边阴影为正数 上边负数 @box 阴影大小 @box_color 阴影颜色 */ .boxshadow(@right_left:5px,@bottom_top:5px,@box:5px,@box_color:#b6ebf7){ box-shadow:@arguments; -moz-box-shadow:@arguments; -webkit-box-shadow:@arguments; } /* 文字阴影,可以指定多组阴影 @right_left1 右边阴影为正数 左边负数 @bottom_top1 下边阴影为正数 上边负数 @text 阴影大小 @text_color 阴影颜色 */ .textshadow(@right_left1:5px,@bottom_top1:5px,@text:5px,@tetx_color:#b6ebf7){ text-shadow:@arguments; } /* 透明度 或渐变 1为不透明 0透明 css3 rgba(110, 142, 185, .4)!important;前三个是颜色值 后一个是透明值 用来兼容所有浏览器 */ .rgba(@rgba_a:.4,@rgb_b:40){ filter: alpha(opacity=@rgb_b); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b}); opacity:@rgb_a; } /* 列布局 @c1 列数 @c2 列宽 @c3 列间距 @c4 边框样式 */ .column(@c1:3,@c2:310px,@c3:10px,@c4:1px solid #ccc){ column-count:@c1; column-width:@c2; column-gap:@c3; column-rule:@c4; -webkit-column-count:@c1; -webkit-column-width:@c2; -webkit-column-gap:@c3; -webkit-column-rule:@c4; -moz-column-count:@c1; -moz-column-width:@c2; -moz-column-gap:@c3; -moz-column-rule:@c4; } /* 画轮廓 就是内部框 @outline 样式 @outline1 间距 负数在内部 */ .outline(@outline:1px solid #699,@outline1:-10px){ outline:@outline; outline-offset:@outline1; } /*背景渐变 @start 渐变开始颜色 @end 结束颜色 */ .bg(@start:#00ffff,@end:#9fffff){ background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end)); background:-moz-linear-gradient(top,@start,@end); fil