Less的简介及其使用

目录

一、Less的简介

 二、Less的优点

三、Less环境变量的配置

 安装NodeJs 

1. 下载地址

 2.检测Npde环境

安装Less 

 四、编译Less文件

创建一个Less文件

 编写Less文件

编译Less

五、使用kaola软件编译Less

六、 其他方式编译Less

七、Less变量 

 1.Less变量的声明

 2.选择器使用变量

 3.Url地址使用说明

4.变量提升

5.属性当作变量

八、Less混合 

混合的基本使用方法

混合中使用() 

 混合中使用 !important 

带参数的混合

九、Less的嵌套

嵌套的基本使用方法

伪选择器与混合一同使用  

十、Less的运算 

十一、Less的转义

十二、Less的函数

十三、Less的作用域

 十四、Less注释与导入

注释

导入 

---

一、Less的简介

Less 是一款比较流行的 css预处理语言，支持变量、混合、函数、嵌 套、循环等特点

 二、Less的优点

①  编程特性

② 无需考虑兼容问题

③ 更易于代码的维护

三、Less环境变量的配置

 安装NodeJs 

1. 下载地址

Download | Node.js

 2.检测Npde环境

在命令框中输入（win+R打开命令框）

node - v

出现如下情况及安装成功 

安装Less 

npm install -g less

lessc -v  

安装完成 

检测安装成功4.2.0版本 

 四、编译Less文件

创建一个Less文件

Less文件后缀名为.less

 编写Less文件

@width:100px;
@height:300px;
.header{
    width: @width;
    height: @height;
}

编译Less

lessc style.less style.css

 

//lessc为关键字  style.less为要编译的文件  style.css为编译成功 的css文件

五、使用kaola软件编译Less

 下载软件地址：http://koala-app.com/

 温馨提示

        安装考拉软件的时候，一定要给一个空文件夹存储，因为他会 删除文件夹中所有内容在安装

 点击左上角的加号导入刚刚的创建的Less所在的文件，就会看到创建出来的Less文件

 考拉软件会自动将Less编译成CSS，而且Sass也可以使用它

六、 其他方式编译Less

出了上述的几种方式外，我们还可以用工程化软件进行编译 Less

例如： Webpack 

七、Less变量 

 1.Less变量的声明

Less允许使用@符号进行定义变量。变量分配使用 " : "进行完成

Less的声明变量的格式为@变量名：变量值

使用格式为：css属性名：@变量名

//变量的声明
@width:100px;
@height:300px;
@font-size:12px;
@color:"#fff";

//变量的使用
.header{
    width: @width;
    height: @height;
    font-size: @font-size;
    color: @color;
    background-color: @color;
}

 2.选择器使用变量

 不仅仅属性可以使用变量，我们的选择器也可以使用变量

其声明格式不变依旧为：@变量名：变量值

使用格式为：.@{ 声明的变量名 }

//选择器变量声明
@my-selectctor:container;

//选择器变量的使用
.@{my-selectctor}{
    width: @width;
    height: @height;
}

 3.Url地址使用说明

在日常编写代码的时候，尤其是在使用图片的时候，会写许多重复的地址的，这个时候就使用变量的方法来实现，从而提高代码的可维护性及可读性

//图片地址声明
@img-url:"./image";

.@{my-selectctor}{
    width: @width;
    height: @height;
    // 变量的使用
    background-color: url("@{img-url}/1.jpg");
}

4.变量提升

变量的声明可以在使用的后面

//变量的使用
.header{
    width: @width;
    height: @height;
    font-size: @font-size;
    color: @color;
    background-color: @color;
}

//变量的声明
@width:100px;
@height:300px;
@font-size:12px;
@color:"#fff";

5.属性当作变量

当css的两个属性的值需要保持一致的时候可以将第一个的属性值给第二个使用

使用格式为：$属性名

tips:使用的是$(美元符号)，不是@

.header{
    width: 100px;
    height: 100px;
    padding: 10px 10px;
    //使用$来引用
    margin: $padding;
}

八、Less混合 

混合的基本使用方法

在日常编写css的时候，会出现两个类会有共同的属性，这个时候混合是一个不错的选择 

混合允许您将一个类的属性用于另一个类，并且包含类名作为其属性

混合的使用方法为：.类名();

.p1{
    color: "#fff";
}
.p2{
    background-color: "#000";
    //p2里面嵌套了p1的属性
    .p1();
}

混合中使用() 

如果你想创建一个混合，但是你不希望这个混合出现在你的CSS 中，在混合定义后面加 圆括号

tips:在添加括号之后里面将不可以使用外面声明的变量但是可以传参

//不想出现在css中的属性
.my-orther-mix(){
    width: 100px;
    height: 300px;
}
//出现在css中的属性
.my-mix{
    background-color: black;
}
.class{
    .my-mix();
    .my-orther-mix();
}

 混合中使用 !important 

在混合调用后使用 !important关键字将它继承的所有属性标记为 !important

tips:一般情况下不建议这么书写，因为important功能太强大了

.my-mix{
    background-color: black;
    color: @color
}
.class{
    //给这个混入添加!important那么这个里面所有的属性都将添加!important
    .my-mix() !important;
}

带参数的混合

上面说到添加（）之后，里面就使用不了外面声明的变量，但是他们可以通过参数的方式进行使用

//当也可以设置默认值，当height没有传值是默认为50px
.my-orther-mix(@width,@height:50px){
    width: @width;
    height: @height;
}
.class{
    //在使用的时候需进行传参，参数可以是声明的变量，也可以是想传入的值
    .my-orther-mix(@width,100px);
}

九、Less的嵌套

嵌套的基本使用方法

 在编写css的时候我们为了增在优先级会在类名前面添加的它对应父级类等等，非常麻烦，Less为我们提供了一种嵌套的书写方法，解决了这个问题

//Less嵌套
.container{
    width: 1200px;
    color: #fff;
    .header{
      width: 100%;
      background-color: red;
      ul{
        width: 120px;
        font-size: 20px;
      }
    }
  }

伪选择器与混合一同使用  

你还可以使用此方法将伪选择器与混合一同使用。重写为一个混合 ( & 表示当前选择器的父级）

.container{
    width: 1200px;
    color: #fff;
    .header{
      width: 100%;
      background-color: red;
      //给header添加hover
      &:hover{
        background-color: blue;
      }
    }
  }

十、Less的运算 

算术运算符 + 、 - 、 * 、 / 可以对任何数字、颜色或变量进行运算。

如果可能的话，算术运算符在加、减或比较之前会进行单位换算。

计算的结果以 最左侧 操作数的 单位 类型为准。

如果单位换算无效或失去意义，则忽略单位

tips :当运算 除法 的时候需要添加 （）

@width:100px;
@height:300px;
@font-size:12px;
@color:#666;  
.box{
    width: @width + 20;
    height: @height - 2;
    color: @color * 2;
    font-size:(@font-size / 2);
  }

十一、Less的转义

转义（ Escaping）允许你使用任意字符串作为属性或变量值。

任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出

当你想声明一个 key:value为值的变量时，由于出现了两个 “ ：”则会出现报错，这个时候使用 转义可以轻松解决

  @min768: ~"(min-width: 768px)";
  .elemet{
    @media @min768 {
        color: #fff;
    }
  }

十二、Less的函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这 些函数在 Less 函数手册中有详细介绍

函数手册地址：https://lesscss.org/functions/ 

percentage函数  percentage可以将数值转换为百分比

ceil 向上取整

floor 向下取整

  .nav {
    width: percentage(100.0);
    height: ceil(3.4px);
    font-size: floor(5.5px);
  }

十三、Less的作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合，如果找不到，则从 “ 父 ” 级作用域继承 层层向上找

  @var:red;
  .box{
    @var:green;
    .box2{
        color: @var;//green
    }
  }

 十四、Less注释与导入

注释

块注释和行注释都可以使用

块注释 /* */ （块注释 可以 通过编译编译到对应的css）

行注释 // （行注释 不可以 通过编译编译到对应的css）

导入 

你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用 了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

@import "library"; // library.less
@import "typo.css";