简单使用方式

首先介绍一下less,less是一种css预编译语言,说白了就是,写起来更方便,编译一下变成了可以正常使用的css的一种语言

ok,直接开始,现在全局装一个less

1
npm install less -g

然后可以创建一个.less为后缀的文件直接开始写,编译指令是

1
lessc styles.less styles.css

用写好的styles.less文件,编译生成styles.css

变量

less允许使用变量,比css中的var要方便一些,以下展示一个例子

1
2
3
4
5
6
7
8
9
@height: 75px;
@width: @height*2;
@themeColor: orange;

.button {
width: @width;
height: @height;
background-color: @themeColor;
}

变量定义允许加减乘除运算,编译之后就能直接生成css

1
2
3
4
5
.button {
width: 150px;
height: 75px;
background-color: orange;
}

混合

混合允许直接copy一个类的属性,比如我们在上面这个例子下面继续写如下代码

1
2
3
4
.spc-btn{
.button();
background-color:red;
}

那么就可以多生成一个类

1
2
3
4
5
6
.spc-btn {
width: 150px;
height: 75px;
background-color: orange;
background-color: red;
}

也就是说,copy所有的属性之后自己可以继续加属性,使用的时候最好不要重写相同属性,否则css文件会出现冗余

按照以下方式来写更好一些

1
2
3
4
5
6
7
8
9
10
11
12
.btn{
width: @width;
height: @height;
}
.orange-btn{
.btn();
background-color: orange;
}
.red-btn{
.btn();
background-color: red;
}

如果我们希望在生成css的时候没有btn这个类,则可以按照如下方式来写,在仅用于继承属性的类名后加一个括号

1
2
3
4
5
6
7
8
9
10
11
12
.btn(){
width: @width;
height: @height;
}
.orange-btn{
.btn();
background-color: orange;
}
.red-btn{
.btn();
background-color: red;
}

函数

如果希望直接对模板属性进行更改覆盖,则可以使用函数

1
2
3
4
5
6
7
8
.btn(@bgColor:pink){
width: @width;
height: @height;
background-color: @bgColor;
}
.orange-btn{
.btn(orange);
}

这样就不会生成多余的同名属性,还可以使用默认值

嵌套

在原先的css中,我们如果需要改某个标签或类内的元素属性,需要写多级css选择来精确地赋予属性,less则是通过嵌套来更方便地书写

比如我们想在刚才那个orange-btn标签中写一个a标签,那么我们可以用less这么写

1
2
3
4
5
6
7
8
9
.orange-btn{
.btn();
a{
color: white;
text-decoration: none;
font-size: 20px;
}
background-color: orange;
}

最后生成的css如下

1
2
3
4
5
6
7
8
9
10
.orange-btn {
width: 150px;
height: 75px;
background-color: orange;
}
.orange-btn a {
color: white;
text-decoration: none;
font-size: 20px;
}

在嵌套中&符号表示当前选择器的父级,我们可以用如下方式给a标签添加更多效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.orange-btn{
.btn();
a{
color: white;
text-decoration: none;
font-size: 20px;
&:hover{
color: orange;
}
&:active{
color: black;
}
}
background-color: orange;
}

生成的css如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.orange-btn {
width: 150px;
height: 75px;
background-color: orange;
}
.orange-btn a {
color: white;
text-decoration: none;
font-size: 20px;
}
.orange-btn a:hover {
color: orange;
}
.orange-btn a:active {
color: black;
}

嵌套的内容,先在本身寻找变量和混合,如果无法找到,则从父级作用域继承

冒泡

当用@规则进行嵌套时,会发生冒泡,这个说明很抽象,直接举个例子

1
2
3
4
5
6
7
8
9
.spc-button{
.btn();
@media(min-width:768px){
width: 600px;
}
@media(min-width:1280px){
width: 800px;
}
}

编译之后可以生成一个响应式的按钮,如下

1
2
3
4
5
6
7
8
9
10
@media (min-width: 768px) {
.spc-button {
width: 600px;
}
}
@media (min-width: 1280px) {
.spc-button {
width: 800px;
}
}

转义

直接上例子,类似于宏定义,~'anything'形式可以按照原样输出

1
2
3
4
5
6
7
8
9
10
11
@min768: ~"(min-width: 768px)";

.spc-button{
.btn();
@media @min768{
width: 600px;
}
@media(min-width:1280px){
width: 800px;
}
}

导入与注释

导入 (css和less均可)

1
2
@import "library"; 
@import "typo.css";

注释 (支持行注释和块注释)

1
2
3
4
// 行注释
/*
块注释
*/

函数