常见的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)插件

常见的CSS预处理器——Less_第1张图片

 (2)验证插件安装

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

常见的CSS预处理器——Less_第2张图片

2.在HMTL上的引用

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

三.Less编写格式

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

1.注释

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

常见的CSS预处理器——Less_第3张图片

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

常见的CSS预处理器——Less_第4张图片

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

常见的CSS预处理器——Less_第5张图片

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

常见的CSS预处理器——Less_第6张图片

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

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

常见的CSS预处理器——Less_第7张图片

四.Less的导出与相互导入

1.Less的导出

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

方法一:

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

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

保存生成前

常见的CSS预处理器——Less_第8张图片

保存生成后

常见的CSS预处理器——Less_第9张图片

 方法二:

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

常见的CSS预处理器——Less_第10张图片

 常见的CSS预处理器——Less_第11张图片

常见的CSS预处理器——Less_第12张图片

 禁止导出:

.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文件代码





    
    
    
    Document
    
    



    
背景色

背景色

背景色

html生成页面样式

常见的CSS预处理器——Less_第13张图片

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代码如下:





    
    
    
    Document
    



    
1
2
3
4

页面展示:

 

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

你可能感兴趣的:(css,less,前端)