12. LESS使用方法

中文网站 lesscss.cn/#getting-st…

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

1.安装

$ npm install -g less

LESS的编译常用的分为两种：

1.开发环境下(开发项目的时候);

我们基于less-2.5.3.min.js进行编译：基于link把less文件导入，

但是rel的值必须是stylesheet/less , 这样导入的JS会找到这些less文件，把less编译为css;

2.生产环境下(项目部署上线的时候)

我们需要把less编译成CSS，然后让页面中导入的都是编译后的CSS， 需要基于node环境，并且基于less模块进行编译(命令操作方式);

安装NODE(安装NPM)
$ npm install less -g (MAC最好设置sudo安装 sudo npm install less -g);
找到对应的less文件目录，在目录中：$ lessc. xxx.less xxx.css / -x (设置-x是为了把代码进行压缩);

1、LESS - 变量

相对CSS3来说，LESS的变量存储一些值之后可以复用，并且当值发生改变时，只需要修改变量的值即可;

如下，当@A改成green，整个值为@A的都会改成green,如果项目中有N个元素需要同时改动，用起来很方便;

.box{
    color:red;
}

// LESS 
@A:red;
@images:"../images";

.box{
    color:@A;
}
.box2{
    color:@A;
    img{
        background:url('@{images}/XXX.jpg');
    }
}

2、LESS - 嵌套

每一个大括号都是私有作用域，在里面用到得变量，先看是否私有的（是否在当前作用域中声明过和形参变量），不是私有的找上级作用域中的;=>"类似于JS作用域链机制";

unit: LESS中内置的函数，用来设置或者去除单位的;

// 普通CSS
.contain{
    ...
}

.contain .box{
    ...
}
.contain .box .box2{
    ...
}

// LESS

@W:100px;
@bg:green;
.contain{
    //.contain的样式
    width:@W;
    
   .box{
   //.contain .box的样式
   backgroud:@bg;
   @bg:gold;
   
   .box2{
   //.contain .box .box2的样式;
   }
 }
}

如上代码，.box的bg优先看自己域有没有，有就使用自己域，没有想上找(类似作用域的查找机制);

3、LESS- 函数

1.每一个样式类都能被充当一个函数，直接在其它的作用域中调取执行（执行特点：不需要传参，可以不加小括号） =>这种函数的调用是把原有的代码都原封不动的拿过来一份一模一样的（包括其所有的后代样式）

2.带参数的函数（创建函数带着小括号），也是直接点的方式调用，但是编译成为css的时候，函数不会编译，但是函数执行出来的代码会放到每一个调取函数的选择器中

3.less中的内置函数

• unit
• darken
• lighten

1、函数调用应用 ——样式复用的方法

1.函数调用
2.继承

// 函数调用
.box1 {
    @A1: lightgreen;
    @W: 200;
    @H: 200px;

    width: unit(@W, px);
    height: @H;
    border: 5px solid @A1;

    //.box1 img
    img {
        //@W-20这样被理解为是一个变量名（变量名可以包含-）
        width: unit((@W)-20, px);
        height: unit(unit(@H, px)-20, px);
    }
}

.box2{
    .box1;// 执行box1,如果结构一样，可以复制全部样式;
}

// 2.样式继承
//写法1
.box2 {
    &:extend(.box1);
}
//写法2
.box2:extend(.box1) {}

基于继承也能实现样式的公用（原理：两个样式类公用同一套代码，但是后代样式不能被继承）

2、函数调用应用 —— 公共方法调用

项目中经常会有一些公共样式，我们一般可以写一些公共的方法放在文件夹，用的时候直接调用即可；

// 公共文件内容common（用来存放公共方法）

.func_center(@W:100,@H:100){
   position: absolute;
   top: 50%;
   left: 50%;
   margin:unit(-(unit(@H,px)/2),px) 0 0 unit(-@H/2,px);
}

.func_transition(@property:all,@duration:.5s,@timing:linear,@delay:0s){
   transition:@arguments;
}


// less.less内容
// 先引入公共方法common;  (reference)表示less文件编译CSSA时，此文件不编译
@import (reference) './common.less';


//less样式引入公共方法

.box1 {
   @A1: lightgreen;
   @W: 200;
   @H: 200px;

   .func_center(@W, unit(@H, px));  //引入居中的函数;
   // unit: LESS中内置的函数，用来设置或者去除单位的(如果有就去除，没有就加上)
   
   img {
    .func_transition;
    .func_transition(@duration: 1s);
    .func_transition(opacity, .3s, ease, 0s);
       }
}

3、darken函数

点击

LESS样式
@C1:pink;
.btn {
    width: 100px;
    height: 50px;
    background: @C1;
    &:hover {
        background: darken(@C1, 20%);
    }
}

鼠标滑过之前

image.png

鼠标滑过之后，颜色变成深20%;

image.png

4、lighten函数

它增加了元素中颜色的亮度。 它有以下参数：

color ：它代表颜色对象。

amount ：它包含0 - 100%之间的百分比。

方法：它是可选参数，通过将其设置为相对，用于相对于当前值进行调整。

@C1:pink;
.btn {
    width: 100px;
    height: 50px;
    background: @C1;
    &:hover {
        background: lighten(@C1, 50%);
    }
}

鼠标滑过之前

image.png

鼠标滑过之后，颜色变成浅，跟darken刚好相反;

image.png

.loop() when ()

.loop(@n) when (@n<=4){
    .loop(@n+1);
    .column-@{n}{
        width:unit(@n*10,%);
    }
}

.loop(1);

// 初始值为@n=1,条件@n<=4;符合条件，每次循环@n+1;.column 每一个width:@n*10%;


// 编译后的CSS
.column-4 {
  width: 40%;
}
.column-3 {
  width: 30%;
}
.column-2 {
  width: 20%;
}
.column-1 {
  width: 10%;
}

LESS样式转译为CSS

在NODE环境下，找到less存放文件处，文件栏输入cmd回车，输入密令lessc xxx.less xxx.css / -x

xxx.less 指需要编译的less文件名

xxx.css 指编译后存放的css文件名 -x 指压缩文件