LESS

less作用

css层叠样式表，它是标记语言，不是编程语言；所有的预编译CSS语言（less/sass…）都是赋予了css的面向对象思想

less的编译

LESS叫做预编译CSS：写好的LESS代码浏览器是不能渲染的，需要我们把它编译成为能渲染的CSS才可以

在开发环境下，我们一般都通过导入less插件（less-2.5.3.min.js）来随时编译less

1
2
3
4
5
<!-- rel="stylersheet/less" -->
<link rel="stylersheet/less" href="1.less">
<!-- 导入less -->
<script src="js/less-2.5.3.min.js"></script>
<!-- 由于每一次加载页面，都需要导入less.js，并且把less文件重新编译为css（很耗性能，页面打开速度肯定会变慢），所以在真实项目中，只有开发环境下我们使用这种模式，生产环境下，我们肯定需要事先把写好的less编译为正常的css后，在上线，以后用户访问的都是编译好的css，而不是拿less现编译 -->

生产环境中，我们需要事先把less编译成css：

  1. 使用node编译
    • 下载安装node
    • 在node全局环境下，使用npm包管理器安装一个less模块
    • npm install less -g
    • 在指定的目录中执行less xxx.less yyy.less 把less编译成css，less xxx.less xxx.min.css -x 不仅编译成css，而且还把css压缩
  2. 使用编译工具

less中的基础与发

变量

  1. 设置变量使用@[变量名]: 变量值
    • 传统css支持的值都可以作为变量值
    • 变量名中可以出现- （less中可以支持数学运算，在部分减法运算的时候，我们需要明确的是运算符还是名字中的-@(shadow-px)-10）
  2. 不是所有的情况下都要使用变量，只有很多样式都使用了相同的值，而且以后如果改变的话所有元素的样式都跟着改变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@a: 1;
@b: 30%;
@c: 1000px;
@d: #000;
@shadow-color: red;
@img-url: '../img';
@name: '测试'；
@get: 'name';
/* @@get => 测试*/
.box {
    opacity: @a;
    filter: alpha(opacity=(@a*100));
    background: url("@{img-url}/xxx.png");
}

mixin混合应用

在less当中只要设置了一个样式类，我们就可以把它称之为一个方法，其他地方需要用刀这些样式的，直接.[类名]调用即可（原理：把当前样式类中的代码原封不动的copy一份过去）

不加括号，即是普通样式类，也是封装的一个函数，编译的时候，这个样式类中的代码依然跟着编译，加括号仅仅是封装的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.pub {
  width: 100px;
  height: 100px;
  background: green;
}

.box {
  .pub;
  background: red;
}

/* 编译后 */
.pub {
  width: 100px;
  height: 100px;
  background: green;
}

.box {
  width: 100px;
  height: 100px;
  background: green;
  background: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.pub() {
  width: 100px;
  height: 100px;
  background: green;
}

.box {
  .pub();
  background: red;
}

/* 编译后 */

.box {
  width: 100px;
  height: 100px;
  background: green;
  background: red;
}

函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.函数名(@参数1:默认值1, @参数2...){
	@arguments
}

.transition(@property:all, @duration, @timing:linear, @delay:0s) {
	transition: @arguments;
    /*transition: @property, @duration, @timining, @delay;*/
}

.box {
    .transition(all, 1s, linear, 0s);
    .transition(@timing: ease, @duration: 1s);
}

.sum(@n:0, @m:0) {
    @result: @n + @m;
}

.box {
    .sum(10, 20);
    width: unit(@result, px);
    /* unit是less提供的方法，unit(value, px)给value值设置单位，但是如果之前已经有单位了，此处是吧原有单位去掉 */
}

命名空间

在less当中每一个大括号都是一个私有作用域，且变量的声明和赋值在作用于中都会提升

1
2
3
4
5
6
7
8
9
10
@a: 10;
.box {
    /* @a 20 */
    width: unit(@a, px);
    @a: 20;
    .mark {
        /* @a 20 */
        width: unit(@a, px);
    }
}

extend继承

项目中，如果想要使用extend实现继承，我们一般都把需要继承的样式类写在最外层（而不是里层的私有作用域），如果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
.pub {
    width: 100px;
    height: 100px;
    background: red;
}

.com {
    color: #ff6700;
}

/* less中的extend继承并不是copy代码，而是让当前的样式类和集成的样式类共用一套样式（编译为群租选择器的方式） */
.box:extend(.pub) {
    background: green;
}

/* 和上面的原理是一样的 */
.box {
    &:extend(.pub, .com);
    background: green;
}

.box {
    .mark {
        width: 100px;
        height: 100px;
    }
    
    .inner {
        // 继承要制定好继承的元素
        // &:extend(.mark);
        /* 继承多个用逗号分隔 */
        // &:extend(.box .mark);
        .mark;
        background: red;
    }
}

条件和递归

我们在mixin中设置的条件：常用的条件运算符：>/>=/</<=/=；我们设定的条件还可以使用is函数：iscolor isnumber isstring iskeyword isurl ispixel ispercentage …

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.pub(@x) when (@x <= 10) {
    width: 100px;
    height: 200px;
}

.pub(@x) when (@x > 10) {
    width: 200px;
    height: 400px;
}

.box {
    .pub(20);
    background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.columns(@i) when (@i <= 4) {
    .box@{i} {
       width: unit(@i*10, %); 
    }
    .columns(@i + 1);
}

.columns(1);

/* 编译后 */
.box1 {
    width: 10%;
}
.box2 {
    width: 20%;
}
.box3 {
    width: 30%;
}
.box4 {
    width: 40%;
}

链接符&和import

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
    .mark { // .box .mark
        color: red;
    }
    // &: 在.box后面紧跟着谁
    &.pp { // .box.pp
        background: red;
    }
    
    & > .mm { // .box > .mm
        background: green;
    }
    
    &:hover { // .box:hover
        background: orange;
    }
}
1
2
@import "reset"; // 在自己的less文件中把reset导入进来
@import (reference) "public"; // 加了reference只导入进来使用，但是不编译里面的代码

less小测
小米商城