快速生成CSS--LESS学习总结
快速生成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_left
1:
5px
,@bottom_top
1:
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(@c
1:
3
,@c
2:
310px
,@c
3:
10px
,@c
4:
1px
solid
#ccc
){
column-count:@c
1
;
column-
width
:@c
2
;
column-gap:@c
3
;
column-rule:@c
4
;
-webkit-column-count:@c
1
;
-webkit-column-
width
:@c
2
;
-webkit-column-gap:@c
3
;
-webkit-column-rule:@c
4
;
-moz-column-count:@c
1
;
-moz-column-
width
:@c
2
;
-moz-column-gap:@c
3
;
-moz-column-rule:@c
4
;
}
/*
画轮廓 就是内部框
@outline 样式
@outline1 间距 负数在内部
*/
.outline(@
outline
:
1px
solid
#699
,@outline
1:
-10px
){
outline
:@outline;
outline-offset:@outline
1
;
}
/*背景渐变
@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);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start,endColorstr=@end,grandientType=
0
);
}
/*
旋转角度
IE不支持 滤镜支持0，1，2，3
*/
.rotate(@ro:
30
deg){
transform: rotate(@ro);
-webkit-transform: rotate(@ro);
-moz-transform: rotate(@ro);
-o-transform: rotate(@ro);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=
3
);
}
/*
过度动画
id是css属性
2s过度时间 0s是开始时间
ease-in进入
*/
.tran(@t:id
2
s ease-out
0
s){
transition:@t;
-moz-transition:@t;
-o-transition:@t;
-webkit-transition:@t;
}
|
上边就是css3的几个效果类，比如调用圆角方法，直接写#div{.round;}就会生成默认圆角5px的效果，要生成10px的呢，就写成#div{.round(10px);}是不是很方便呢？对于颜色和长度单位，还可以进行+ - * /四则运算，可以实现快速变化长度颜色。定义宽度@width:2px;@width *3;就表示6px，颜色类似运算。如果想定义字符串如：@str:'www.x.com';当然官方还有高级应用介绍，不过一般写css用的很少，这里主要是常用的，就是用来方便写css，我这里这是列举了css3的几种方法，因为css3为了兼容多种浏览器，往往css代码特别多，这是一个简化css 代码的好方法，css2里面有些也可以自己定义，我们还可以写一个页面，专门用来定制自己需要的类的效果。
好了，less就说这么多，其实记住一个，就是用@定义变量，然后像写函数写css，就可以使用了，下载less：
http://lesscss.googlecode.com/files/less-1.3.0.min.js
页面中只需要这样就可以了
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
第一行是你的less代码，第二行是用来解析less的，如果你也想像我一样生成css来使用，到http://www.oschina.net/tools/less来编译吧。
(原创 by yoby)