1. 为什么需要Less?
CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。而Less在CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS的维护成本,使 CSS 更易维护和扩展。LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。
Less(LeanerStyle Sheets )是一门 CSS扩展语言,也成为CSS预处理器。
less的中文官网:Less.js 中文网 。
bootstrap中less教程:http://www.bootcss.com/p/lesscss/。
2.Less使用
2.1 变量
使用@来申明一个变量:@变量名:属性值;
- 作为普通属性值只来使用:直接使用 font-size:@font14;
- 作为选择器和属性名:#@{selector的值} 的形式
- 作为URL:@{url}
变量名要求:
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
2.2 嵌套规则
(1) 基本嵌套规则
// 嵌套
// 在类名header 中有一个类名nav
.header {
.nav {
color: @color;
}
}
// 等同于css中的
.header .nav {
color: #fff;
}
(2) &的使用
注意:结构选择器、伪类选择器等在less时需要注意要用&连接。
//例如
a {
:hover {
text-decoration: none;
}
}
//编译成css就变成了
a :hover {
text-decoration: none;
}
// 这样是错误的设置,不会产生效果,正确的写法是添加&连接
a {
&:hover {
text-decoration: none;
}
}
a:hover {
text-decoration: none;
}
2.3 运算
在less
文件中,任何数字、颜色或变量都能参与运算。
// 加(+)、减(-)、乘(*)和、除(/)
// 运算符中间左右有个空格隔开
@w: 30;
@w2: 20;
body {
width: @w * @w2; //width: 600;
height: (@w2 / @w); //height: 0.66666667;
}
// 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
body {
width: 20px + 30rem; //width: 50px;
}
// 如果两个值之间只有一个值有单位,则运算结果就取该单位
body {
height: 20 - 10rem ; //height: 10rem;
}