0%

Less快速入门

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

在客户端使用Less

首先引入.less文件。要设置rel属性值为“stylesheet/less”:

1
<link rel="stylesheet/less" type="text/css" href="styles.less">

这里下载Less 之后,然后在\中引入:

1
<script src="less.js" type="text/javascript"></script>

注意:你的less样式文件一定要在引入less.js前先引入。

注释

less的注释有两种,//和/ /

Less Code

1
2
3
4
5
6
// 单行注释,不编译
/*
多行注释,编译
多行注释,编译
多行注释,编译
*/

Compiled Css Code:

1
2
3
4
5
/*
多行注释,编译
多行注释,编译
多行注释,编译
*/

变量

以@开头 例如:@test_width:100px;

Less Code

1
2
3
4
@text_width:100px;
.text{
width: @text_width;
}

Compiled Css Code:

1
2
3
.text {
width: 100px;
}

混合

一个类可以当做另一个元素的属生值,并可以接受自己的参数。

可以在一个classA中引入另一个classB,从而实现classB继承classA的所有属性,可以带参数。经常使用在封装兼容不同浏览器的情况下。

无参混合

Less Code

1
2
3
4
5
6
7
8
9
10
11
.classA{
border: 10px solid red;
border-radius: 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
.classB{
.classA;
width: 50px;
height: 50px;
}

Compiled Css Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.classA {
border: 10px solid red;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.classB {
border: 10px solid red;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
width: 50px;
height: 50px;
}

带参数混合(不带默认值)

Less Code

1
2
3
4
5
6
7
8
9
10
11
.classA(@radius){
border: 10px solid red;
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.classB{
.classA(10px);
width: 50px;
height: 50px;
}

Compiled Css Code:

1
2
3
4
5
6
7
8
.classB {
border: 10px solid red;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
width: 50px;
height: 50px;
}

带参数混合(带默认值)

Less Code

1
2
3
4
5
6
7
8
9
10
11
.classA(@radius:5px){
border: 10px solid red;
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.classB{
.classA();
width: 50px;
height: 50px;
}

Compiled Css Code:

1
2
3
4
5
6
7
8
.classB {
border: 10px solid red;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
width: 50px;
height: 50px;
}

@arguments变量

在Mixins中使用这个参数的时候,它表示所有的变量。

Less Code:

1
2
3
4
5
6
7
8
.box(@x:0,@y:0,@blur:1px,@color:gray){
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
box-shadow: @arguments;
}
#main{
.box(5px,5px,6px,#662500);
}

Compiled Css Code:

1
2
3
4
5
#main {
-moz-box-shadow: 5px 5px 6px #662500;
-webkit-box-shadow: 5px 5px 6px #662500;
box-shadow: 5px 5px 6px #662500;
}

匹配

.name(条件一,参数){}
.name(条件二,参数){}
.name(@_,参数){}
调用:.name(条件值,参数值);

假设需要做一个三角形的图标,三角形可能朝不同的方向,可以这样写:

Less Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//@_意思是与top,bottom,left,right都匹配
.triangle(@_,@w:5px,@c:gray){
width: 0px;
height: 0px;
overflow: hidden;
}
.triangle(top,@w:5px,@c:gray){
border-width: @w;
border-color: transparent transparen @c transparent;
border-style: dashed dashed solid;
}
.triangle(bottom,@w:5px,@c:gray){
border-width: @w;
border-color: @c transparen transparent transparent;
border-style: solid dashed dashed;
}
.triangle(left,@w:5px,@c:gray){
border-width: @w;
border-color: transparen @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:gray){
border-width: @w;
border-color: transparen transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.sanjiao{
.triangle(top,100,green);
}

Compiled Css Code:

1
2
3
4
5
6
7
8
.sanjiao {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 100;
border-color: transparent transparen #008000 transparent;
border-style: dashed dashed solid;
}

这样就可以在需要使用不同方向的三角时,直接通过匹配实现。

运算

任何数字、颜色、变量都可以参与运算,运算被包裹在括号中。

颜色的运算不常用到,更多的是数字和变量的运算。

运算中没有强制性规定一定要带单位,运算中只要有一个带单位的即可,如果单位不同,以先出现的单位为准

Less Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@width_a: 500px;
@width_b: 50px;
.text_01 {
width: @width_a + 20;
}

.text_02 {
width: @width_a + 20rem;
}

.text_03 {
width: 20rem + @width_a;
}

.text_04 {
width: @width_a - @width_b;
}

Compiled Css Code:

1
2
3
4
5
6
7
8
9
10
11
12
.text_01 {
width: 520px;
}
.text_02 {
width: 520px;
}
.text_03 {
width: 520rem;
}
.text_04 {
width: 450px;
}

嵌套

Html Markup:

1
2
3
4
<div id="box">
<p>hello <a href="http://zhyat.cn">zhyat</a></p>
<span>一些学习笔记</span>
</div>

Less Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#box{
display: inline;
float: left;
p{
font-size: 15px;
a{
text-decoration: none;
color: gray;
&:hover{
color: blue;
}
}
}
span{
font-size: 12px;
color:pink;
}
}

Compiled Css Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#box {
display: inline;
float: left;
}
#box p {
font-size: 15px;
}
#box p a {
text-decoration: none;
color: gray;
}
#box p a:hover {
color: blue;
}
#box span {
font-size: 12px;
color: pink;
}

根据DOM树形结构去书写代码,从而减少选择器的层级关系,使得代码更简洁。

需要注意的是在操作伪代码的时候,需要再前面加&。有&的时候解析为同一元素或此元素的伪类,没有&的时候解析为此元素的后代元素

Less Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a{
&:hover{
color: blanchedalmond;
}
&{
font-size: 15px;
}
:visited{
color: burlywood;
}
.ml{
font-weight: 40;
}
}

Comoiled Css Code

1
2
3
4
5
6
7
8
9
10
11
12
a {
font-size: 15px;
}
a:hover {
color: blanchedalmond;
}
a :visited {
color: burlywood;
}
a .ml {
font-weight: 40;
}

color函数

颜色定义函数

Less Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@color1:rgb(255,255,255);       //转化为#ffffff param1:红色通道 param2:绿色通道 param3:蓝色通道 三个参数均是包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。
@color2:rgba(155,155,155,0.2); //rgba(155, 155, 155, 0.2) 同上,param4是alpha通道,包含0到1之间的数字或0到100%之间的百分比。
@color4:hsl(22,100%,20%); //转化为#662500,param1:度数(0~360,整数) param2:饱和度(0~1或0~100%) param3:亮度(0~1或0~100%)
@color5:hsla(22,100%,20%,0.4); //转化为rgba(102, 37, 0, 0.4),同上,param4是alpha通道,包含0到1之间的数字或0到100%之间的百分比。
@color6:hsv(55,0.7,0.5); //转化为#807826,param1:度数(0~360,整数) param2:饱和度(0~1或0~100%) param3:value(0~1或0~100%)
@color7:hsva(125,179,18,0.6); //转化为rgba(0, 255, 0, 0.6),同上,param4是alpha通道,包含0到1之间的数字或0到100%之间的百分比。

.box{
width: 50px;
height: 50px;
border-width: 2px;
border-style: solid;
border-color: @color1 @color2 @color4 @color5;
background-color: @color6;
color: @color7;
}

Comoiled Css Code

1
2
3
4
5
6
7
8
9
.box {
width: 50px;
height: 50px;
border-width: 2px;
border-style: solid;
border-color: #ffffff rgba(155, 155, 155, 0.2) #662500 rgba(102, 37, 0, 0.4);
background-color: #807826;
color: rgba(0, 255, 0, 0.6);
}
颜色通道函数
序号 函数 描述 例子
1 hue 在HSL颜色中提取颜色的色调
hue( hsl(22,100%,20%);``` Comoiled Css Code ``` background: 22;``` |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|  2   |  saturation   | 在HSL颜色中,提取彩色对象的饱和通道。   | ```background: saturation( hsl(22,100%,20%);```Comoiled Css Code ``` background: 100%;``` |
| 3 | lightness | 在HSL颜色空间中,从颜色对象提取亮度通道。 | ```background: lightness( hsl(22,100%,20%);```Comoiled Css Code ``` background: 20%;``` |
| 4 | hsvhue | 在HSV色彩空间中,提取色彩对象的色调通道。 | ``` background: hsvhue(hsv(55,0.7,0.5));``` Comoiled Css Code ``` background: 55;``` |
| 5 | hsvsaturation | 在HSL颜色空间中,提取彩色对象的饱和通道。 | ``` background: hsvsaturation(hsv(55,0.7,0.5));``` Comoiled Css Code ``` background: 70%;``` |
| 6 | hsvvalue | 在HSL颜色空间中,提取颜色对象的值通道。 | ``` background: hsvvalue(hsv(55,0.7,0.5));``` Comoiled Css Code ``` background: 50%;``` |
| 7 | red | 提取彩色对象的红色通道。 | ``` background: red(rgba(155,154,153,0.2));``` Comoiled Css Code ``` background: 155;``` |
| 8 | green | 提取彩色对象的绿色通道。 | ``` background: green(rgba(155,154,153,0.2));``` Comoiled Css Code ``` background: 154;``` |
| 9 | blue | 提取彩色对象的蓝色通道。 | ``` background: blue(rgba(155,154,153,0.2));``` Comoiled Css Code ``` background: 153;``` |
| 10 | alpha | 提取颜色对象的alpha通道。 | ``` background: alpha(rgba(155,154,153,0.2));``` Comoiled Css Code ``` background: 0.2;``` |
| 11 | luma | 计算颜色对象的亮度值。 | ``` background: luma(rgba(155,154,153,0.2));``` Comoiled Css Code ``` background: 6.47593448%;``` |
| 12 | luminance | 在没有伽马校正的情况下计算亮度值。 | ``` background: luminance(rgba(155,154,153,0.2));``` Comoiled Css Code ``` background: 12.08944314%;``` |



##### 颜色操作

以不同的方式改变和操作颜色,形如function(param1,param2);

param1是颜色对象

param2可以是

| 序号 | 函数 | 描述 |
| :--: | :--------: | :------------------: |
| 1 | saturate | 改变元素中颜色的强度或饱和度。 |
| 2 | desaturate | 降低了元素中颜色的强度或饱和度 |
| 3 | lighten | 增加了元素中颜色的亮度 |
| 4 | darken | 改变元素中颜色的强度或饱和度 |
| 5 | fadein | 增加了所选元素的不透明度 |
| 6 | fadeout | 减少所选元素的不透明度 |
| 7 | fade | 用于设置所选元素的颜色的透明度 |
| 8 | spin | 用于旋转所选元素的颜色的角度 |
| 9 | mix | 将两种颜色与不透明度混合 |
| 10 | tint | 将颜色与白色混合,同时减少颜色的比例 |
| 11 | shade | 将颜色与黑色混合,因为您减少了颜色的比例 |
| 12 | greyscale | 从所选元素中的颜色中丢弃饱和度 |
| 13 | contrast | 设置元素中颜色的对比度 |



##### 颜色混合函数

| 序号 | 函数 | 描述 |
| :--: | :--------: | :--------------------------------: |
| 1 | multiply | 将两种颜色相乘,并返回结果颜色 |
| 2 | screen | 需要两种颜色,并返回更明亮的颜色。 与multiply函数相反 |
| 3 | overlay | 它通过组合乘法和屏幕的效果来生成结果 |
| 4 | softlight | 工作方式类似于覆盖,但它仅使用颜色的一部分,其中柔和突出显示其他颜色 |
| 5 | hardlight | 工作方式类似于覆盖 ,但颜色的作用相反 |
| 6 | difference | 从第一输入颜色中减去第二输入颜色 |
| 7 | exclusion | 工作原理类似于difference,但对比度较低 |
| 8 | average | 计算每个通道(RGB)基础上的两种输入颜色的平均值 |
| 9 | negation | 与opposite函数相反,其从第二颜色中减去第一颜色 |

#### 命名空间

在为了更好的组织CSS或者为了更好的封装,将一些变量和混合模块打包起来。在使用的时候,就需要把有关的一部分取出来。

*Less Code*

```less
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { }
.citation { }
}

#header a{
color: orange;
#bundle > .button;
}

Comoiled Css Code

1
2
3
4
5
6
7
8
9
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: #ffffff;
}

作用域

less的作用域和别的编程语言非常相似,变量同样也有作用范围,首先会先从本地查找,如果没有再从父级的作用域查找。其实就是就近原则,元素先查找本身有没有这个变量,如果有,就取本身的变量,如果没有,就从父级元素的作用域查找,以此类推,直至找到相应的变量。

Less Code

1
2
3
4
5
6
7
8
@var:green;
#main{
@var:white;
#box{
@var:red;
color: @var;
}
}

Comoiled Css Code

1
2
3
#main #box {
color: #ff0000; //red
}

!importing

提升优先级,但是和css一样,不推荐使用,多用于调试。会为所有的混合所带来的样式,添加上!importing

Less Code

1
2
3
4
5
6
7
#box {
border: 5px solid red;
border-radius: 3px;
}
#main{
#box !important;
}

Comoiled Css Code

1
2
3
4
5
6
7
8
#box {
border: 5px solid red;
border-radius: 3px;
}
#main {
border: 5px solid red !important;
border-radius: 3px !important;
}

importing

引入.less,.less后缀可不带

1
2
@import "lib.less";
@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理,只需要使用.css后缀就可以:

1
@import "lib.css";

避免编译

将需要避免编译的字符串用“”包含,并在“前加上~,如:

1
2
3
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

参考资料:

Less 一种动态样式语言

大漠的博客 CSS-LESS

imooc–less即学即用