快速生成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);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start,endColorstr=@end,grandientType=0);
}
/*
旋转角度
IE不支持 滤镜支持0,1,2,3
*/
.rotate(@ro:30deg){
        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 2s ease-out 0s){
    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)

posted @ 2012-05-16 08:09  Yoby  阅读(4032)  评论(6编辑  收藏