常见的CSS预处理器——Less

一.Less介绍

1. 官方介绍

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

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

2.自我理解

Less像是css的一种扩展升级，使程序员在读写时更加便利。标签嵌套对比css不用大量重复录写，计算上可以在写入公式后在css文件中查得到具体数值。可以通过变量，写入容器属性值，给多个标签内使用，方便使用和修改（全局变量和局部变量，不用像css一个一个慢慢找着修改了）。还可以通过函数进行一些判断。

二.Less的使用

1.在VSCode上的安装使用

（1）插件安装

在VSCode界面选择点击左侧最后一个方块堆叠图，在输入框中输入less，点击蓝色安装图标，可以根据自己的喜欢选择LESS插件，英语小白也可以像我一样在插件库中下载安装中文语言包（输入chinese）插件

 （2）验证插件安装

在界面创建一个 （命名名称）.less 文件，在文件中编写并保存，看是否会生成 .less 文件同名的 .css 后缀文件

2.在HMTL上的引用

.less无法直接在html文件上引入使用，可以引入预编译保存生成的.css文件。

三.Less编写格式

.less 的编写格式会与 .css多少有些不同

1.注释

在 less 中有多行注释（快捷键Shift+Alt+A）和单行注释（快捷键Ctrl+ / ），单行注释不会在css文件中生成，多行注释会生成

2.使用Less嵌套写法生成后代选择器

 3.使用Less嵌套写法生成后代选择器

  4.使用Less嵌套写法生成交集选择器

   5.使用Less嵌套写法生成子代选择器以及伪元素和伪类选择器

 在写伪类和伪元素的时候，可以使用 & 来代替父元素

四.Less的导出与相互导入

1.Less的导出

less文件生成css文件默认是在less文件的同一目录文件夹下，如果有大量less文件导出生成css文件，着对整理分类起到过多麻烦与不适。于是就得修改css生成路径与所在文件夹位置。

方法一：

在 .less 文件编写的 最上方 写上 .css文件的生成路径,生成路径有相同名字的文件夹，则会生成在相同文件夹中，注意自己的命名不要不符合规范，和生成文件夹中是否有相同名称的文件。

命名一
// out:./命名css存放文件夹名/
命名二
// out:./命名css存放文件夹名/命名的.css

保存生成前

保存生成后

 方法二：

在安装的插件界面中找到所安装的插件，点击设置齿轮→扩展设置→在 settings.json中编辑→编写自己全局的 .css 的生成路径并 保存

 

 禁止导出：

在 .less 文件第一行添加: // out: false

//  out:false

2.Less的相互导入——@import

通常编写网页，我们会将多个网页的公共样式、可以通用的网页模块、和标签属性样式分类写入不同的css文件中并在多个网页中重复引入使用以节省编写时间和工作量。相对的,  less 可以将存写的不同样式的 .less 文件导入一个主体 .less 文件中生成一个css文件引入html中

导入编写方式一：

注意：若你的文件名有空格也要相应的输入空格，VSCode会注释标红，但属于正常

// 第一种导入方式
@import url(./01练习.less);

导入编写方式二：

@import './01练习.less';

五.常见用法示例

1.从第一个Less变量开始

Less里面的变量都是以@作为变量的起始标识，变量名由字母、数字、_和-组成；

在一个文件里面定义的同名变量存在全局变量和局部变量的区别；

变量最大的优点是： 方便使用和修改。

语法：

@变量名: 值;
@fontSize: 16px;

第一个Less变量编写

.less文件代码

@bg-color: red;
/*  @变量名：值;  */
div {
    width: 100px;
    height: 100px;
    background-color: @bg-color;
}

p {
    background-color: @bg-color;
}

a {
    background-color: @bg-color;
}

 .less保存后生成的.css文件代码

/*  @变量名：值;  */
div {
  width: 100px;
  height: 100px;
  background-color: red;
}
p {
  background-color: red;
}
a {
  background-color: red;
}

.html文件代码

    
    
    
    
    
    



    
背景色
    
背景色
    背景色

html生成页面样式

2.变量计算

.less文件代码

@nice-blue: #f938ab;
@light-blue: @nice-blue + #333;
@HtmlFtSize: 70px;

.box {
    width: 100px + @HtmlFtSize;
    // 注意：单位的转换 计算的时候以第一个单位为准
    height: (100 / @HtmlFtSize);
    // height: (100rem / @HtmlFtSize);
    // height: 100px - @HtmlFtSize;
    margin: (@HtmlFtSize * 5) auto;
    padding: (@HtmlFtSize / 5);
    border: 1px + @HtmlFtSize * 3 solid red;
    background-color: @light-blue;
}

 .less保存后生成的.css文件代码

.box {
  width: 170px;
  height: 1.42857143px;
  margin: 350px auto;
  padding: 14px;
  border: 211px solid red;
  background-color: #ff6bde;
}

3.条件判断

Less除了支持"等于"的匹配方式，Less还支持大于、小于等条件判断的语法

4.综合实例

网页除了pc端，还有移动（手机）端、ipd端，屏幕页面的不同，使网页的展示会出现不同，可以通过不同的预设样式去解决网页适配问题。

@media (媒体特性){
          选择器{
           样式
        }
}
完整写法
@media 关键词 媒体类型 and (媒体特性){css代码}

实例一

四个横排的盒子，需求:在屏幕宽度小于1200px时隐藏第二个盒子，小于800px隐藏第三个盒子 

.less代码如下：

@media (max-width:1200px) {
    .box>div:nth-child(2) {
        display: none;
    }
}

@media (max-width:800px) {
    .box>div:nth-child(3) {
        display: none;
    }
}

.box {
    width: 800px;
    height: 200px;
    margin: 100px auto;
    display: flex;

    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    &>div:nth-child(2n+1) {
        background-color: aqua;
    }
}

.css代码如下：

@media (max-width: 1200px) {
  .box > div:nth-child(2) {
    display: none;
  }
}
@media (max-width: 800px) {
  .box > div:nth-child(3) {
    display: none;
  }
}
.box {
  width: 800px;
  height: 200px;
  margin: 100px auto;
  display: flex;
}
.box div {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box > div:nth-child(2n+1) {
  background-color: aqua;
}

html代码如下：

    
    
    
    
    



    

        
1
        
2
        
3
        
4
    

页面展示：

 

后续在深入的学习后会继续更新本文章