Less 常用语法

Less 日常用法

你需要了解的

less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 ​​css​​ 文件，是一种强大的 css 编译语言，能使用 变量、运算符、判断、方法等等。

本文我只写一些自己常用的方法，要看全部的帮助文档，参阅这里：​​http://lesscss.cn/features/​​

看个小例子

写一个 ​​.btn​​​ 类并支持 ​​:hover​​​ ​​:active​​ 样式

CSS

.btn {
/* btn 初始样式 */
}
.btn:hover{
/* :hover 样式 */
}
.btn:active{
/* :active 样式 */
}

Less

.btn{
// btn 初始样式
&:hover{
// hover 样式
}
&:active{
// active 样式
}
}

可以看出 less 的结构要比 css 清晰，并且写的也要更少。
下面的 less 在使用中就会生成上面的 css。
而这还只是皮毛，保证你用过 less 之后就不会再用 css 写样式了。

变量

​​less​​​ 是支持变量的，因为有了变量，让 ​​less​​​ 在改变全局样式的时候更加方便了。
一般使用中，颜色是最常用的。其次是单位长度。

@变量名: 变量值
// 如：
// Colors
@red: #CD594B;
@yellow: #F8CE5E;
@green: #4B9E65;
@yellow: #5A8DEE;

// Unites
@btn-padding: 4px;
@btn-lineheight: 26px;

实际使用中：

less

.btn-success {
background-color: @green;
line-height: @btn-lineheight;
color: #fff;
}

生成 css

.btn-success {
background-color: #4B9E65;
line-height: 26px;
color: #fff;
}

混合

可以直接在其它类中插入其它类的内容。

less

.bg-yellow {
background-color: @yellow;
}

.btn-warn {
line-height: @btn-lineheight;
.bg-yellow;
}

会生成 css

.bg-yellow {
background-color: #F8CE5E;
}

.btn-warn {
line-height: 26px;
background-color: #F8CE5E;
}

运算符

less 支持 ​​+​​​ ​​-​​​ ​​*​​​ ​​/​​​ ​​( )​​ 运算，看例子

@width-20: 20px;
@count: 3;
@per-10: 10%;

.card{
width: @width-20 * @count;
min-width: @per-10 * 7;
}
// 注意，运算的时候，要在运算符两边留空格，因为可能会有横线连接的变量，造成混淆。
// 单位 less 可以自动识别，不用担心单位。

输出

.card{
width: 60px;
min-width: 70%;
}

less 的内置函数

参阅 ： ​​http://lesscss.cn/functions/#string-functions​​

完整的函数有：
​​​杂项函数​​​、​​字符串函数​​​、 ​​列表函数​​​、 ​​数学函数​​​、​​类型函数​​​、​​颜色定义函数​​​、​​颜色通道函数​​​、​​颜色操作函数​​​、​​颜色混合函数​​

这里只说一此关于颜色的常用方法，因为其它的我现在也没怎么用到。

lighten(颜色, 百分比)
// 调高颜色的亮度

darden(颜色, 百分比)
// 调低颜色的亮度

saturate(颜色, 百分比)
// 调高饱和度

desaturate(颜色, 百分比)
// 调低饱和度

@green: #4B9E65;


.green{
background-color: @green;
}

.green-lighten{
background-color: lighten(@green,20%);
}

.green-darken{
background-color: darken(@green,20%);
}

.green-saturate{
background-color: saturate(@green,20%);
}

.green-desaturate{
background-color: desaturate(@green,20%);
}

输出

.green {
background-color: #4B9E65;
}
.green-lighten {
background-color: #88c79c;
}
.green-darken {
background-color: #2a5939;
}
.green-saturate {
background-color: #34b55c;
}
.green-desaturate {
background-color: #62876e;
}

函数方法的使用

有时候，比如，你需要写一个按钮类 ​​.btn-success​​​, ​​.btn-danger​​​, ​​.btn-default​​​, ​​.btn-warning​​，如果单个定义的话，会很麻烦，现在用了方法，就可以直接填参数完成了。

less

@green: #4B9E65;
@blue: #5A8DEE;
@yellow: #F8CE5E;
@red: #CD594B;

.btn-template(@bgcolor,@fcolor:white){
// 定义了两个参数，第二个参数有默认值
// 也就是说这个方法可以值一个或两个参数
// 另外 带 () 参数的方法不会把自身渲染到 css 中，只有调用才会渲染
color: @fcolor;
border-color: darken(@bgcolor, 3%);
background-color: @bgcolor;
&:hover {
color: @fcolor;
background-color: darken(@bgcolor, 5%);
}
&:active {
color: @fcolor;
background-color: darken(@bgcolor, 10%);
}
}

.btn-success{
.btn-template(@green)
}
.btn-primary{
.btn-template(@blue)
}

.btn-warning{
.btn-template(@yellow)
}

.btn-danger{
.btn-template(@red)
}

上面的 less 输出为下面的内容，有没有很厉害

.btn-success {
color: white;
border-color: #46945e;
background-color: #4B9E65;
}
.btn-success:hover {
color: white;
background-color: #438d5a;
}
.btn-success:active {
color: white;
background-color: #3b7b4f;
}
.btn-primary {
color: white;
border-color: #4c83ed;
background-color: #5A8DEE;
}
.btn-primary:hover {
color: white;
background-color: #437dec;
}
.btn-primary:active {
color: white;
background-color: #2c6de9;
}
.btn-warning {
color: white;
border-color: #f7ca4f;
background-color: #F8CE5E;
}
.btn-warning:hover {
color: white;
background-color: #f7c746;
}
.btn-warning:active {
color: white;
background-color: #f6bf2d;
}
.btn-danger {
color: white;
border-color: #ca4e3f;
background-color: #CD594B;
}
.btn-danger:hover {
color: white;
background-color: #c74737;
}
.btn-danger:active {
color: white;
background-color: #b34032;
}

文件拆分，文件引用

像 js 和其它高级开发语言一样， less 也可以引用外部的 less 文件

引用格式：

@import "variables.less"

这样就把外部的 ​​variables.less​​ 引入到当前文件中了

variables.less

// colors
@green: #4B9E65;
@blue: #5A8DEE;
@yellow: #F8CE5E;
@red: #CD594B;

// units
@common-height: 30px;
@input-height: 26px;
@input-padding: 4px;

主体less文件

@import "variables.less"

// 主文件里面就可以引用 variables.less 中的变量了。

学习 Less 最好的例子

就是去看 ​​bootstrap 3.4​​​ 的样式源码，bootstrap 3.4 就是用 ​​less​​​ 写的，这也是我后来用 ​​less​​​ 没用 ​​sass​​ 的主要原因。

下载 ​​bootstrap 3.4​​ 的 less 源码，看里面怎么写的，进步很快的。

---

是我孤陋寡闻了，原来 ​​bootstarp 4​​ 已经换作 SCSS 了，我也要转向 SCSS 了，学习完了再来分享给大家。

点这里去 github 查看 ​​【 Bootstrap 分支 】​​​ ，目前好像已经开始 ​​v5.0​​ 的开发了。