CSS预处理之Less
趁这几天有空,了解一下css预处理的知识
less简介
Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性。
Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。
语法
- 变量
声明一个变量:
@width:100px;.test { width: @width;}
- 混合
.border { border: 1px solid red;} .test { width: @box_width; height: 100px; background: #ccc; .border; //直接混合使用}
- 嵌套
正常写法
.test { font-size: 10px;}. test a { color: red;}
less 写法:
.test { font-size: 10px;a { color: red; }}
同样可以包含伪类:
.test { font-size: 10px; a { &:hover { color: blue; } color: red; }}
- 运算
@width: 5px;.test { width: @width + 10; //15px}
less能推断此处的单位
- 函数
.border_radius(@width:5px) { //5px是可选参数,表示默认值 -webkit-border-radius: @width; -moz-border-radius: @width; -ms-border-radius: @width; border-radius: @width;} .test { .border_radius(20px); }
- 命名空间
.bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } }}//现在如果我们想在 .header a 中混合 .button 类,那么我们可以这样做:.header a { color: orange; .bundle > .button; }
- 作用域
@var: red;.page { #header { color: @var; // white } @var: white;}
- 避免编译
.test { width: ~'calc(300px - 30px)';}
- 注释
//不会被编译css/**/会被编辑到css
更多使用语法,请查看less中文网。http://lesscss.net/个人github博客:aralic.github.io