less概述

持久的棒棒君

已于 2023-05-16 09:45:57 修改

阅读量1.8k

点赞数

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

于 2022-07-02 22:00:00 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/125572684

版权

大杂烩专栏收录该内容

259 篇文章 1 订阅

订阅专栏

文章目录

less
1、概述
2、使用
2.1 服务器端和命令行使用less
（1）安装
（2）使用命令将less编译成css

2.2 浏览器使用less
（1）引入less文件
（2）引入less.js文件

2.3 编译工具插件转换less为css

3、语法

less

1、概述

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言。

特点：在css的基础上增加了变量、混合、函数等新特性，使得css更容易维护和扩展。less既可以在客户端运行，也可以借助node.js在服务器端运行。

2、使用

2.1 服务器端和命令行使用less

（1）安装

方式1：全局安装

npm install less -g

方式2：局部安装

npm i less --save-dev

（2）使用命令将less编译成css

lessc xxx.less xxx.css

2.2 浏览器使用less

（1）引入less文件

<link rel="stylesheet/less" type="text/css" href="styles.less" />

（2）引入less.js文件

引入下载好的less.js或者less.min.js文件

<script src="less.js" type="text/javascript"></script>

或者使用cdn引入

<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

这种方式在引入less文件的时候，默默的转换为了css文件，所以不用手动转换

例如：

<!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>测试less</title>
    <!-- <link rel="stylesheet" href="../css/test01.css"> -->
    <link rel="stylesheet/less" type="text/css" href="../css/test01.less" />
</head>
<body>
    <div class="outer">
        <div class="middle">
            <div class="inner">

            </div>
        </div>
    </div>
    <script src="../js/less.min.js" type="text/javascript"></script>
</body>
</html>

less文件

.outer{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    .middle{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left:0;
        margin: auto;
        width:300px;
        height:300px;
        background-color: skyblue;
        .inner{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left:0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
    }
}

2.3 编译工具插件转换less为css

vscode：下载easyLess插件
作用：每次写完less文件保存后就会在当前目录下自动生成一个编译好的css文件。使用时引用这个css文件即可。

3、语法

详细学习建议直接看【官网】
当然我也总结了一份【less语法简单总结】

持久的棒棒君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
less概述

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言。特点：在css的基础上增加了变量、混合、函数等新特性，使得css更容易维护和扩展。less既可以在客户端运行，也可以借助node.js在服务器端运行。方式2：局部安装（2）使用命令将less编译成css2.2 浏览器使用less（1）引入less文件（2）引入less.js文件引入下载好的less.js或者less.
复制链接

扫一扫