Less预处理器给CSS加点儿料

在逃小屁王

已于 2024-09-29 16:16:02 修改

阅读量722

点赞数 23

文章标签： less 前端 css

于 2024-09-28 23:29:59 首次发布

本文链接：https://blog.csdn.net/weixin_56473118/article/details/142618858

版权

Less介绍

Less是一门CSS的扩展语言，它的语法和CSS相近，來帮助我们快速的书写CSS代码，享受'5G速度'。

安装Less

！三种方法任你选择！

在 Node.js 环境中使用 Less：

npm install -g less

在代码中引入 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

在Vscode中安装 Easy Less插件(推荐)：

基础语法

注意：Less作为CSS的扩展语言，不被浏览器所识别，所以我们在HTML中引入的还是css文件。

使用：直接建一个以 .less 为扩展名的less文件，保存之后，会自动生成css文件。

less文件的导入

你可以实现在一个less文件中引入另一个less文件（.less 可以省略）

@import "文件路径";   //import 和文件路径中间的空格，还有最后的分号，别忘了

css文件禁止导出

你可以控制css文件的自动生成

代码位置：在less文件第一行

// out: false    “// 别落了”

css文件的导出

你可以控制css文件的导出位置和名称

代码位置：在less文件第一行

// out:./css/

代码意思：在该 less 文件同级目录建了一个名为css的文件夹



// out:./index.css

代码意思：在该 less 文件同级目录导出css文件，文件名index



// out:./css/index.css

代码意思：就是生成index.css文件在css文件夹里面

其实， out后面的写法就是文件路径的写法，大家自己试试。

运算

在less中，可以直接计算表达式

div {

    width: 5+1px;  //width:6px;

    width: 5-1px;  //width:4px;

    width: 5*1px;  //width:5px;

    width: (6/2px);  //width:3px;

    width: 6./2px;  //width:3px;

注意：除法有两种写法，单位写在最后即可

}

嵌套

假设你想要以下CSS代码：

.father .son{

 //css代码
 
}

用 Less 语言我们可以这样书写代码：

.father {

    //css代码
    .son {
        //css代码
    }

}

'&' 符号表示当前选择器，嵌套使用不会生成后代选择器

像伪类、结构选择器等使用该符号

再假设你想要以下代码：

.father .son:hover {

    //css代码
    
}

用 Less 语言我们可以这样书写代码：

.father {

    .son {
        &:hover {
            
        }
    }

}

变量

在less中，公共属性可以直接声明一个变量存起来，哪里需要往哪搬，还支持一键更改

（像选择器、URL路径也可以被声明变量，想了解的朋友可直接转战less官方文档的进阶指南）

Less代码：

//定义变量
@myColor: red;
@width: 5px;

//使用变量
div {
    width: @width;
    color: @myColor;
}

span {
    width: @width+5px;
    color: @myColor;
}

得到的CSS代码：

div {
  width: 5px;
  color: red;
}
span {
  width: 10px;
  color: red;
}

混合

直接看代码：

Less代码：

.div() {   //这里的（）可加可不加，对调用没有影响
    width: 50px;
    height: 50px;
}

.box {
    background-color: red;
    .div();   //调用时的（）必加
}

得到的CSS代码：

.box {
  background-color: red;
  width: 50px;
  height: 50px;
}

注意：

只有 元素选择器 不能实现混合。
被调用的选择器 后面的（）可加可不加。加不加都不影响它被调用，只会影响它能否在css代码中生效（示例代码中就没生效）

小牢骚

写这篇博客呢是为了记录一下我目前的学习情况。当然，如果这篇博客能给大家带来帮助会更好，这也是我期待的。

初次接触Less的时候，就马上去它的官网了解了一下，发现自己学到的只是基础......还有很多进阶知识和一堆函数等着我。看到这些，我脑子里只蹦出了一个疑问，这些基础知识貌似已经够我用的了，那剩下的呢？抱着存在即合理的心态，我狂搜它的使用，但是没找到我想要的。可能是我搜的关键词不对，我觉得还是因为自己太菜了。

学习前端最大的感触就是，它好灵活啊！好多变啊！不过还是有点儿好玩的！！

最后，我会继续在以后的学习和项目中去不断总结Less的使用，然后来更新这篇仅仅是基础知识的博客。