StylesheetLanguage--如何使用Less--前端样式语言
ArthurSlog
SLog-9
Year·1
Guangzhou·China
July 15th 2018
现在的时代 可能青山还在 但你已经没柴烧了 因为漫山遍野都是人
开发环境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>
复制代码如果你现在安装有 Firefox浏览器，可以直接用 Firefox浏览器 打开，应该可以看到效果了，然后你可以结束本篇或者继续接着往下看
跳过上面那一步，我们现在启动静态web服务器：
node index.js
- 打开浏览器器（不一定要Firefox浏览器），在地址了输入 127.0.0.1:3000, 正常执行你会看到以下结果(字体是红色的)
The static web server by ArthurSlog
复制代码- 至此，我们介绍了 less.js 的内容和用法，更多信息请参考 less官方网站。
欢迎关注我的微信公众号 ArthurSlog
如果你喜欢我的文章 欢迎点赞 留言
谢谢
StylesheetLanguage--如何使用Less--前端样式语言相关推荐
- 前端开发语言有哪些？需要掌握什么？
前端开发语言有哪些?需要掌握什么?通常前端开发在基础阶段掌握html+css+js+jq:框架语言阶段掌握vue+react+小程序:后端掌握nodejs+mongdb+云开发:UI框架阶段熟悉常见的 ...
- web前端开发语言介绍
web前端开发语言主要包含:html语言,css样式代码,javascript脚本,html5,css3,jQuery,ajax,Bootstrap,Backbone 1.html语言:网页的基本标记 ...
- Less （一种动态样式语言）
Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...
- 【校招VIP】前端JS语言之语法相关
考点介绍: 简单来说JavaScript也是一门轻量级的编程语言,只是他可插入到HTML中,而后由浏览器执行. 一个完整的JavaScript基本由3部分组成: 第一部分:ECMAScript是核心 ...
- 【Web技术】1431- 总结前端主题切换的思考和现代前端样式的解决方案落地
关于本文 来自:codercao https://juejin.cn/post/7106702604024938503 demo在线体验地址:https://hongqingcao.github.io ...
- AUI_Js脚本_Jira多选下拉列表前端样式优化
Js脚本_Jira多选下拉列表前端样式优化 标准的多选下拉列表在选择时的样式像是一个文本框平铺开来,用JS脚本优化成类似"Label"的视图效果. 实践方法: 在customfie ...
- 【校招VIP】前端JS语言之数据类型
考点介绍: JavaScript 中常见数据类型有Number.String.Boolean.Object.Array.Json.Function.Date.RegExp.Error.undefine ...
- 前端开发语言基础介绍
前端开发语言基础介绍(纯图文版) 文字版推荐:https://blog.csdn.net/chenhande1990chenhan/article/details/54881478 目录 前端开发语言 ...
- 在html语言描述中，css的特点有,css样式 css样式语言特点
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修 ...
- Web前端一种动态样式语言-- Less
变量 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用.所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了. // LESS@color: #4D926F;#header { c ...
最新文章
- cuda cudnn pytorch版本对应关系
- 基于node.js的压缩合并安装
- H3C交换机版本升级（图形化）
- 存储引擎-存储结构之一:行
- 新思路设计可视化大型微服务监控系统
- HDU 1232 - 畅通工程
- Hibernate中常见的异常
- Spring 的创建流程
- 第三次学JAVA再学不好就吃翔(part114)--Properties类
- Entity Framework Core延期及弃用的特性
- web文件管理系统_财务影像管理系统
- 今晚直播丨用高效的Oracle性能诊断工具，让运维工作轻松起来！
- 【zookeeper】zookeeper 脑裂问题
- 卸载阿里云服务器的mysql_阿里云服务器购买，双11领阿里云服务器优惠券！
- duilib源码修改之WindowImplBase类OnCreate函数
- 使用批处理文件，自动设置计算机IP地址
- Telegram纸飞机电报更改为设置为中文汉化教程
- node express框架实现下载文件功能
- 计算机操作系统学习之信号量机制
- android 手机内存64实际不到,我手机64G都天天清理，为什么内存越来越少？原来方法不对...