less 怎么导入less文件 less如何使用

转载

mob64ca1404476b 2024-08-20 12:01:40

文章标签 less 怎么导入less文件 less 样式预处理层叠样式表语言前端 文章分类 架构后端开发

ArthurSlog
SLog-9
Year·1
Guangzhou·China
July 15th 2018

less 怎么导入less文件 less如何使用_前端

现在的时代可能青山还在但你已经没柴烧了因为漫山遍野都是人

开发环境MacOS(High Sierra 10.13.5)

课前预习：

Less 是一种动态层叠样式表语言，在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制
运行环境：LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）
Less 运行时是一份js文件 less.js
使用方式：本篇使用浏览器直接引入的方式
Less的语法功能

开始编码

现在切换至桌面路径

cd ~/Desktop

创建一个文件夹node_koa_learningload

mkdir node_less_learningload

切换路径到新建的文件夹下

cd node_less_learningload

使用npm初始化node环境，一路enter键完成初始化

npm init

使用npm安装koa和koa-static

sudo npm install koa koa-static

参考Koa-static说明手册，我们在当前路径下编写index.js和index.html两份文件

index.js

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();

// $ GET /package.json
app.use(serve('.'));

app.listen(3000);

console.log('listening on port 3000');

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ArthurSlog</title>
</head>
<body>

<h1>The static web server by ArthurSlog</h1>

</body>
</html>

根据less官方网站的使用提示，需要再引用脚本之前包含样式表，所以在当前路径下，根据 less官方手册编写样式表 stytles.less

styles.less

@color: red;

h1 {
    color: @color;
}

现在，引入样式表的路径如下：

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

在当前路径下，git clone 一份 less 的源码：(没有安装git工具的，请先安装)

git clone https://github.com/less/less.js.git

现在，index.html 完整代码如下：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ArthurSlog</title>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js/dist/less.js" type="text/javascript"></script>
</head>
<body>

<h1>The static web server by ArthurSlog</h1>

</body>
</html>