1 less是什么
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。
less的中文官网:http://lesscss.cn/ 。
bootstrap中less教程:http://www.bootcss.com/p/lesscss/。
2 Less编译工具
koala 官网:www.koala-app.com 。
3 less中的注释
- 以
//
开头的注释,不会被编译到css
文件中 - 以
/**/
包裹的注释会被编译到css
文件中
4 less中的变量
使用@来申明一个变量:@pink:pink;
- 作为普通属性值只来使用:直接使用
@pink
- 作为选择器和属性名:
#@{selector的值}
的形式 - 作为
URL
:@{url}
- 变量的延迟加载
5 less中的嵌套规则
- 基本嵌套规则
&
的使用
6 less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式:
- 普通混合
- 不带输出的混合
- 带参数的混合
- 带参数并且有默认值的混合
- 带多个参数的混合
- 命名参数
- 匹配模式
arguments
变量
7 less运算
在less
文件中,任何数字、颜色或变量都能参与运算,就是less
提供了+
、-
、*
、/
算术的运算。代码如下:
/*是在less文件里写*/
@width:10px + 5;
div {
/*其实就变成了15px的边框*/
border:@width solid skyblue;
}
/*生成的css文件是这样的*/
div {
border:15px solid skyblue;
}
/*甚至还以带小括号,比如说下面这种 和数学中的一样,先算小括号再去相乘*/
width:(@width + 5) * 2;
@baseFont:50;
/* 也可以定义一个变量*/
div {
/*就等同于88/50 但要记得需要有其中一个数值带单位*/
/*如果两个数值都没有单位,那的出来的值也没有单位*/
width:88rem / @baseFont;
}
注意点:
- 运算符中间左右必须有空格隔开
1px + 5
; - 对于两个不同单位值之间的运算,运算结果的值会取第一个值的单位
18rem + 5px
,单位就是rem
,不是px
; - 如果两个值之间只有一个值有单位,则运算结果就取该单位
8 less避免编译
less
里面有一个避免编译,有时候我们需要输出一些不正确的css
语法或者使用less
不认识的专有语法。要输出这样的值我们可以在字符串前加上一个~
。代码如下:
.test_03{
width: 300px;
height: calc(300px - 30px);
}
=>
.test_03 {
width: 300px;
height: calc(270px);
}
这里的calc
,有时候我们是让浏览器计算,不是让less
计算。所以我们采用避免编译。
.test_03{
width: 300px;
height: ~'calc(300px - 30px)';
}
=>
.test_03 {
width: 300px;
height: calc(300px - 30px);
}
9 less继承
- 性能比混合高
- 灵活度比混合低