关于less预处理语言

粉色水杯

已于 2022-04-15 14:10:28 修改

阅读量1.1k

点赞数 2

文章标签： css3 less

于 2022-03-26 20:06:21 首次发布

本文链接：https://blog.csdn.net/linxuanasd/article/details/123757848

版权

前言：

less 是一门 CSS 预处理器语言，通过它来编写 CSS 效率能大大提升

html的结构会随页面的要求加高为变得复杂，深度变深，CSS选择器书写起来变得很长，不方便，less可以通过嵌套，使得选择器比较简洁。

使用less的方式有几种，比如npm下载，或者引入less.js文件，使用vs插件easy less,或者使用Webpack等等。

我主要想说一下使用插件的方法。

简单介绍一下，当保存less文件时，会自动生成相应的CSS文件。

准备工作：快捷键生成简单的html结构，建立tree.less文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="green">
        <h1>
            <p>种好一棵树</p>
        </h1>
    </div>
</body>
</html>

引入CSS文件，注意是CSS，不是less

<link rel="stylesheet" href="./tree.css"/>

给最外层的div加样式，在less文件中进行样式编写

.green{
    width: 500px;
    background-color: chartreuse;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

保存，自动生成CSS文件

屏幕样式

特性一：提供变量支持

场景：如果需要多次使用同一属性的值，比如颜色，宽度等等，如果需要更改，只需要改变变量赋值就可以，不用多次更改，更加方便。

@width:600px;
@backgroundColor:chartreuse;

.green{
    width: @width;
    background-color: @backgroundColor;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

特性二：可以嵌套

当前HTML结构是

<div class="green">
        <h1>
            <p>种好一棵树</p>
        </h1>
    </div>

对p标签进行样式的编写，直接可以在.green中嵌套写

@width:600px;
@backgroundColor:chartreuse;

.green{
    width: @width;
    background-color: @backgroundColor;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    p{
        height: 60px;
        background-color: aqua;
    }
}

保存，观察效果

再看tree.css文件

.green {
  width: 600px;
  background-color: chartreuse;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.green p {
  height: 60px;
  background-color: aqua;
}

直接对应生成，非常方便。

less中还可以使用
例如	媒体查询
hover	@media
before、after	等等

hover：实现鼠标移上改变字体颜色

@width:600px;
@backgroundColor:chartreuse;

.green{
    width: @width;
    background-color: @backgroundColor;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    p{
        height: 60px;
        background-color: aqua;
        //鼠标移上改变文字颜色
        &:hover{
            color:blue;
        }
        //&代表父级选择器也就是p标签外，一整个的内容
        

    }
}

对应的CSS

.green {
  width: 600px;
  background-color: chartreuse;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.green p {
  height: 60px;
  background-color: aqua;
}
.green p:hover {
  color: blue;
}

&符号就是p标签选择器的内容.green p

伪类

那么我就使用伪类来解决面试中的一个问题吧

@width:800px;
@backgroundColor:chartreuse;

.green{
    width: @width;
    background-color: @backgroundColor;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    p{ 
        width: 200px;
        font-size: 20px;
        //鼠标移上改变文字颜色
        &::before,&::after{     
            content:'';
            margin-bottom:5px ;
            border: 2px solid black;
            width: 15%;
            display: inline-block;
        }
        //&代表父级选择器也就是p标签外，一整个的内容


    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./tree.css"/>
</head>
<body>
    <div class="green">
            <p>种好一棵树</p>
    </div>
</body>
</html>

CSS

.green {
  width: 800px;
  background-color: chartreuse;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.green p {
  width: 200px;
  font-size: 20px;
}
.green p::before,
.green p::after {
  content: '';
  margin-bottom: 5px ;
  border: 2px solid black;
  width: 15%;
  display: inline-block;
}

实现效果

媒体查询@media

字体在宽度小于等于800都变紫色

less

@width:800px;
@backgroundColor:chartreuse;

.green{
    width: @width;
    background-color: @backgroundColor;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    p{ 
        width: 200px;
        font-size: 20px;
        //鼠标移上改变文字颜色
        &::before,&::after{     
            content:'';
            margin-bottom:5px ;
            border: 2px solid black;
            width: 15%;
            display: inline-block;
        }
        //&代表父级选择器也就是p标签外，一整个的内容
        @media screen and (max-width:800px){
            color: blueviolet;
        }

    }
}

CSS

@media screen and (max-width: 800px) {
  .green p {
    color: blueviolet;
  }
}

总的来说easy less这个插件是非常好用的，推荐大家使用！