序
作为一种 CSS 扩展, Less 不仅向后兼容 CSS, 它还使用现有的 CSS 语法新增了额外的特性. 这使得学习 Less 更轻松, 一旦有任何问题,可以随时退回使用标准的 CSS。
为什么要学习less,sass等预编译语言?
因为高效,便捷,复用,利于维护……
安装
一. 菜鸟方式
koala官网:http://koala-app.com/index-zh.html
点击下载:下载koala v2.3.0
二. 其他方式
npm安装:
$ npm install less -g
调用语法:
lessc [option option=parameter ...] <source> [destination]
例如:
$ lessc bootstrap.less bootstrap.css
以下是我使用less总结下来的的5大经典实用技术
1.嵌套
最喜欢的莫过于嵌套语法
编译前:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
编译后:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
2.表达式
可以进行运算,比如加、减、乘、除。(注意:老外的数学不是盖的,使用圆括号进行优先级计算时注意单位,因为有坑)
举一个栗子让大家慢慢体会。
编译前:
.test {
width: (200+200)-10px;
height: 2*200px;
font-size: 24px/2;
border-width: 20-10px;
}
编译后:
.test {
width: 390px;
height: 400px;
font-size: 12px;
border-width: 10px;
}
3.混合
sass也有这个功能,不过我还是觉得less的混合比较人性化,调用方便快捷。另外,它还可以用来封装css3帧动画以及浏览器兼容样式混合函数。
快来一堆栗子吭一下。
编译前:
.error{
color: red; // 这个会生成样式
}
.warning(){
background-color: orangered;
}
.font-s(@x){ //传参
font-size: @x;
}
.line-h(@h:1.2em){ //设置默认值
line-height: @h;
}
.message{
.error;
.warning(); //无参数调用可以省略括号
.font-s(24px);
.line-h();
}
编译后:
.error {
color: red;
}
.message {
color: red;
background-color: orangered;
font-size: 24px;
line-height: 1.2em;
}
小白莫要以为上面的做法太多余,如果是大型项目,遇到大量相同样式的时候,他就可以发威了!!!
4.变量
我个人喜欢通过变量存储一些常用色彩以及字体等。
编译前:
@color-c: #ccc;
@selector: banana;
.@{selector} {
color: @color-c;
}
编译后:
.banana {
color: #cccccc;
}
5.父级选择器
例一
编译前:
a {
color: blue;
&:hover {
color: green;
}
}
编译后:
a {
color: blue;
}
a:hover {
color: green;
}
例二
编译前:
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
编译后:
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
结束语
当然,less的功能远远不止这些,还有很多高级语法没有在上面的案例中展示。如果您热衷于less预编译,请去官网了解更多