LESS 快速使用入门指南简介 - 文章教程

LESS 快速使用入门指南简介

发布于 2019-04-09 字数 3756 浏览 1494 评论 5

Less CSS 是一个使用广泛的 CSS 预处理器,通过简单的语法和变量对 CSS 进行扩展,可减少很多 CSS 的代码量。

LESS 快速使用入门指南简介

LESS 将 CSS 赋予了动态语言的特性,如 变量、 继承、运算、函数等,LESS 既可以在客户端上运行,支持IE 6+、Webkit、Firefox,也可一在服务端运行借助 Node.js。

关于Less

一直以来,都是使用JS扩展的比较多还没有使用过CSS的扩展,最近看到一个CSS的扩展叫做LESS;LESS最早是1个ruby的gem,用于扩展css的语法,前段时间出来了一个JS版的,看看先。

使用方法

1、下载JS https://github.com/less/less.js 现在最新版本好像是 3.9.0

2、使用 Less,CSS 文件的后缀名需要改为.less。

3、在 HTML 页面中加入下面代码

LESS.less 文件就是样式表文件,并且 LESS.less 必须放在 less.min.js 文件前加载并且 Type 一定要是 text/less,切记是一定!

<link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" />
<script src="less.min.js"></script>

值得注意的是 link 的 type 属性必须要是 text/less,之前用习惯了 text/css 结果死活就是没有效果。

HTML 的基本代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LESS CSS</title>
<link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" />
<script src="less.min.js"></script>
</head>
<body>
  <div class="div1">TEST1...</div>
  <div class="div2">TEST2...</div>
  <div class="div3">TEST3...</div>
  <div class="div4">
    <div>
      <span>SPAN</span>
    </div>
    <span>SPAN</span>
  </div>
  <div class="div5">TEST5...</div>
  <div class="div6">TEST6...</div>
</body>
</html>

后面的样式都是在那个 LESS.less 文件中所定义。

Less 语法介绍

1、定义变量

@colors:#333;
.div1{
  color:@colors;
  font-weight:bold;
  background-color:#CCC;
}

这样就可以实现:当需要修改颜色的时候只需要修改一处即可。

2、样式内嵌

.div3{
  border:#222 solid 1px;
  .div1
}

这样可以直接嵌入.div1的样式而无须复制代码了。

3、嵌套规则

@fonts:12px;
.div4{
  border:#333 solid 1px;
  padding:10px;
  div{
    background-color:red;
    span{
      color:red;
    }
  }
  span{
    background-color:@colors;
    font-size:@fonts * 2;
  }
}

这样可以使样式的名称更为的简短,并且修改的时候好找一些,因为都在一块嘛。

4、样式运算

代码见嵌套规则代码中的最后一个 span 标签的 font-size 属性,好处类似于定义变量的好处。

5、样式传参

.div5(@widths:5px){
  color:red;
  border-style:solid;
  border-color:@colors;
  border-width:@widths;
}
.div6{
  .div5(10px);
}

这个的好处就不言而喻了,像编程一样编写我们 CSS 代码,个人最喜欢这样的方式。

LESS 官方网站:http://lesscss.org/

LESS 原理

LESS JS 版本的是使用 ajax 获取 LESS.less 文件,然后根据该文件中所定义的规则生成最终浏览器能理解的 CSS,然后再将其插入到 HTML 代码中。所以就出现前面说过的 <link rel=”stylesheet/less” href=”LESS.less” /> 必须在 JS 前面。

PS:可能是因为安全限制的原因,IE 和 Chrome 无法查看到 LESS 的效果的(报的是 HTTP404 错误),必要的话,大家可以用 IIS 或者是 FireFox、Opera、Safari 来浏览。

基于 LESS JS 版本的实现原理,是每次请求都需要通过 JS 去动态生成原始的 CSS,那么如果 CSS 比较大的话,对于客户端的性能影响比较大,所以个人觉的 LESS 的 JS 版本实用性不强。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

JSmiles 站长 回复 清晨说ぺ晚安 2019-04-10 5 楼

好像只有减号有问题 * / + 都不用空格,减号不能连着变量,会被误认为一个整体,中间需要空格。

清晨说ぺ晚安 2019-04-10 4 楼

踩了个坑 width:@width-20 要类似calc的写法 width:@width - 20*5

JSmiles 站长 2019-04-10 3 楼

注意直接拷贝网页中代码可能因为一些空白符的原因导致编译出错。

JSmiles 站长 回复 虐人心 2019-04-10 2 楼

全局安装 less 后 再安装一个插件 less-plugin-clean-css 命令为:npm install -g less-plugin-clean-css,每次保存的时候,改 less 文件会自动保存到当前目录下变成 .css 文件。

虐人心 2019-04-10 1 楼

为什么我用 npm 运行 less 只在运行结果那里显示了转义之后的 CSS 样式,没有自动生成 .css 文件呢?
而且刷新浏览器样式也没有变化

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0