Less预处理——初识Less(预处理数据的方法)

编辑：rootadmin

Less预处理——初识Less 系列文章目录文章目录系列文章目录一、Less 简介二、安装 Easy LESS三、第一个小例子一、Less 简介

推荐整理分享Less预处理——初识Less(预处理数据的方法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:预处理数据的方法,fsl预处理,less预处理器,less预处理语言,eeglab预处理,eeglab预处理,预处理preparedstatement,less预处理器详解,内容如对您有帮助，希望把文章链接给更多的朋友！

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node 或浏览器端。

Less 可以让我们用更少的代码做更多的事情。

二、安装 Easy LESS Less预处理——初识Less(预处理数据的方法)

Easy LESS：用于实现编写 Less 文件后自动生成 CSS 或者 WXSS 文件

三、第一个小例子

index.html 文件

注意：把 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>Document</title> <link rel="stylesheet" href="./index.css"></head><body> <div id="container"> Hello Less! </div></body></html>

index.less 文件

@xxx：定义公共的样式使用的时候直接 @xxx 即可@color: skyblue;@bgColor: red;@width: 100px;@height: 100px;#container { color: @color; background-color: @bgColor; width: @width; height: @height;}

index.css 文件

自动转义后的 css 文件如下#container { color: skyblue; background-color: red; width: 100px; height: 100px;}

这里是前端杂货铺，期待您的三连 + 关注

本文链接地址:https://www.jiuchutong.com/zhishi/298629.html 转载请保留说明！

上一篇：git提交规范，规范自己的提交标准(git代码提交规范)

下一篇：JavaScript -- Map对象及常用方法介绍(js map())