Less——强大的css开发管理利器
Less是一个开发管理CSS的强大工具,强大在哪里呢?她给CSS增加了设置变量(variables)、引用(mixins)、嵌套(nested)、运算(operations)的功能。下面用实际代码来演示Less的作用。
首先新建一个文件:example.less,less格式文件的语法和css文件格式一样,只要你有css基础,你就能很快地掌握less。
设置变量(variables)
设置变量(variables)功能和JavaScript文件中设置变量的形式差不多,一次设置,就可以重复使用。在新建的example.less输入如下代码:
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
经过编译后就能产生一个example.css文件,其内容如下:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
样式#header和h2中引用的@brand_color值已经变成了#4D926F,有点意思了吧,别急,接着往下看。
引用(mixins)
引用(mixins)功能可以让一样式引用另一个样式中的所有css语句。下面给出less文件内容:
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners;
}
经过编译后产生的css文件内容如下:
