less学习笔记教程

学习日记

已于 2022-04-25 13:47:18 修改

阅读量847

点赞数 4

分类专栏：前端文章标签： less css

于 2022-04-04 11:17:39 首次发布

本文链接：https://blog.csdn.net/hello_list/article/details/123950625

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

less

介绍

中文网：https://less.bootcss.com/

在这里插入图片描述

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

环境准备

vscode下载安装

学习less之前我们需要有学习less的环境，这里呢我们用到vscode，vsCode是一个轻量级的编辑器，微软开发，其中很多有大量插件，也是前端的一款广泛使用的编辑器。

介绍（来自百度百科）：

在这里插入图片描述

如果没有vscode，下载地址：https://code.visualstudio.com/

下载下来像qq一样安装即可，很简单，这里就不过多演示了；

下载完之后呢，我们只需要安装一个插件，就搞定了，看下图步骤：

在这里插入图片描述

安装完成新建一个less文件夹作为我们的工作目录：

在这里插入图片描述

快速上手

1、新建一个文件夹less01，在其中新建一个hello.less

在这里插入图片描述

2、在目录下，新建一个index.html文件，输入一个！出现提示，回车，可以快速生成一个html结构，我们在页面中引入hello.css，编写以下代码

hello.less代码

@width: 100px;
@height: 100px;
@boxColor:red;


#box{
    width: @width;
    height: @height;
    background-color: @boxColor;
}

css代码是经过预处理，自己不用编写，是这样的：

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>less01</title>
    <link rel="stylesheet" href="hello.css">
</head>
    
<body>
    <div id="box"></div>
</body>
</html>

可以双击打开index.html页面，可以看到效果，这里再推荐一个好用的vscode插件Live Server，可以直接文件右键打开，即可运行到浏览器，这不是单纯的打开文件，而是在vscode中内置了一个服务器，通过服务器打开网页，应该运行会在浏览器中自动弹出网页，如果没有，在浏览器地址栏中输入地址http://127.0.0.1:5500/less01/index.html，即可访问

在这里插入图片描述