Less 教程

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_34228387

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量105

点赞数

文章标签： javascript xhtml 前端 ViewUI

原文链接：https://juejin.im/post/5af53d8d518825426a1fbd45

版权

1. Less 基本教程

1.1 Less 入门简介

1.1.1 什么是LESS？

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量(variables),混合(mixins),函数(functions) 和许多其他的技术等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情，让你的Css更具维护性，主题性，扩展性。。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。

1.1.2 为什么要使用LESS

LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
可以通过使用LESS 变量来实现更快的维护。

1.1.3 历史

LESS由 Alexis Sellier 于2009年设计。LESS是一个开源。 LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript代替。

1.1.4 特征

更清晰和更可读的代码可以以有组织的方式编写。
我们可以定义样式，它可以在整个代码中重复使用。
LESS是基于JavaScript的，是超集的CSS。
LESS是一个敏捷工具，可以排除代码冗余的问题。

1.1.5 优点

LESS轻松地生成可在浏览器中工作的CSS。
LESS使您能够使用嵌套编写更干净，组织良好的代码。
通过使用变量可以更快地实现维护。
LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
LESS提供使用操作，使得编码更快并节省时间。

1.1.6 缺点

学习如果你是新的CSS预处理需要时间。
由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。
与旧的预处理器(例如Sass)相比，LESS具有较少的框架，Sass由框架 Compass ， Gravity和 Susy 组成。

1.1.7 适用人群

本教程将帮助学生以及希望使他们的网站或个人博客更具吸引力的专业人士。

1.1.8 学习前提

您应该熟悉:

使用任何文本编辑器的基本字处理。
如何创建目录和文件。
如何浏览不同的目录。
使用Internet Explorer或Firefox等流行的浏览器进行Internet浏览。
使用HTML或XHTML开发简单的网页。

如果您是HTML和XHTML的新手，那么我们建议您先阅读HTML教程或XHTML教程。

1.2 Less 安装

Less可以通过npm在命令行上使用，作为一个脚本文件浏览器或用于广泛的第三方工具下载。

1.2.1 Less的系统要求

操作系统:跨平台
浏览器支持: IE(Internet Explorer 8+)，Firefox，Google Chrome，Safari。

1.2.2 安装 Less

步骤(1): 我们需要NodeJs运行LESS示例。要下载NodeJs，下载zip文件的最新功能版本。

步骤(2): 接下来，运行安装程序以在系统上安装 Node.js 。

步骤(3): 接下来，通过NPM(节点程序包管理器)在服务器上安装LESS。在命令提示符下运行以下命令。

$ npm install -g less
复制代码

步骤(4): 接下来，在成功安装LESS后，您将在命令提示符下看到以下行:

`-- less@2.6.1
  +-- errno@0.1.4
  | `-- prr@0.0.0
  +-- graceful-fs@4.1.3
  +-- image-size@0.4.0
  +-- mime@1.3.4
  +-- mkdirp@0.5.1
  | `-- minimist@0.0.8
  +-- promise@7.1.1
  | `-- asap@2.0.3
  +-- request@2.69.0
  | +-- aws-sign2@0.6.0
  | +-- aws4@1.3.2
  | | `-- lru-cache@4.0.0
  | |   +-- pseudomap@1.0.2
  | |   `-- yallist@2.0.0
  | +-- bl@1.0.3
  | | `-- readable-stream@2.0.6
  | |   +-- core-util-is@1.0.2
  | |   +-- inherits@2.0.1
  | |   +-- isarray@1.0.0
  | |   +-- process-nextick-args@1.0.6
  | |   +-- string_decoder@0.10.31
  | |   `-- util-deprecate@1.0.2
  | +-- caseless@0.11.0
  | +-- combined-stream@1.0.5
  | | `-- delayed-stream@1.0.0
  | +-- extend@3.0.0
  | +-- forever-agent@0.6.1
  | +-- form-data@1.0.0-rc4
  | | `-- async@1.5.2
  | +-- har-validator@2.0.6
  | | +-- chalk@1.1.1
  | | | +-- ansi-styles@2.2.0
  | | | | `-- color-convert@1.0.0
  | | | +-- escape-string-regexp@1.0.5
  | | | +-- has-ansi@2.0.0
  | | | | `-- ansi-regex@2.0.0
  | | | +-- strip-ansi@3.0.1
  | | | `-- supports-color@2.0.0
  | | +-- commander@2.9.0
  | | | `-- graceful-readlink@1.0.1
  | | +-- is-my-json-valid@2.13.1
  | | | +-- generate-function@2.0.0
  | | | +-- generate-object-property@1.2.0
  | | | | `-- is-property@1.0.2
  | | | +-- jsonpointer@2.0.0
  | | | `-- xtend@4.0.1
  | | `-- pinkie-promise@2.0.0
  | |   `-- pinkie@2.0.4
  | +-- hawk@3.1.3
  | | +-- boom@2.10.1
  | | +-- cryptiles@2.0.5
  | | +-- hoek@2.16.3
  | | `-- sntp@1.0.9
  | +-- http-signature@1.1.1
  | | +-- assert-plus@0.2.0
  | | +-- jsprim@1.2.2
  | | | +-- extsprintf@1.0.2
  | | | +-- json-schema@0.2.2
  | | | `-- verror@1.3.6
  | | `-- sshpk@1.7.4
  | |   +-- asn1@0.2.3
  | |   +-- dashdash@1.13.0
  | |   | `-- assert-plus@1.0.0
  | |   +-- ecc-jsbn@0.1.1
  | |   +-- jodid25519@1.0.2
  | |   +-- jsbn@0.1.0
  | |   `-- tweetnacl@0.14.1
  | +-- is-typedarray@1.0.0
  | +-- isstream@0.1.2
  | +-- json-stringify-safe@5.0.1
  | +-- mime-types@2.1.10
  | | `-- mime-db@1.22.0
  | +-- node-uuid@1.4.7
  | +-- oauth-sign@0.8.1
  | +-- qs@6.0.2
  | +-- stringstream@0.0.5
  | +-- tough-cookie@2.2.2
  | `-- tunnel-agent@0.4.2
  `-- source-map@0.5.3

复制代码

1.2.3 例子

下面是一个简单的LESS示例。

hello.htm

<!doctype html>
<head>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>

复制代码

接下来，让我们创建一个与CSS非常相似的文件 style.less ，唯一的区别是它将以 .less 扩展名保存。应在文件夹 nodejs 中创建文件 .html 和 .less 。

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1{
color: @primarycolor;
}
h3{
color: @color;
}
复制代码

使用以下命令将 style.less 文件编译为 style.css :

lessc style.less style.css
复制代码

当您运行上述命令时，它将自动创建 style.css 文件。无论何时更改LESS文件，都需要在cmd中运行上面的命令，然后更新 style.css 文件。

运行以上命令时， style.css 文件将具有以下代码:

style.css

h1 {
  color: #FF7F50;
}
h3 {
  color: #800080;
}
复制代码

输出

让我们执行以下步骤，看看上面的代码如何工作:

将上面的html代码保存在 hello.htm 文件中。
在浏览器中打开此HTML文件。
将显示 Hello World 页面

/*
 * @Author: Ayooo 
 * @Date: 2018-05-11 14:58:14 
 * @Last Modified by:   Ayooo 
 * @Last Modified time: 2018-05-11 14:58:14 
 */
复制代码

2. Less 语言特性

3. Less 函数

4. Less 用法

5.参考文档

W3C School Less教程
 LESS CSS 框架简介
 Less.js 中文文档

转载于:https://juejin.im/post/5af53d8d518825426a1fbd45

weixin_34228387

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫