less的了解及基本使用

最新推荐文章于 2025-05-08 19:52:24 发布

原创

最新推荐文章于 2025-05-08 19:52:24 发布 · 3.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#less #css #css3 #前端 #javascript

（图片来自less官网）

less官网：Less 快速入门 | Less.js 中文文档 - Less 中文网

声明：本博资料大部分引于LESS « 一种动态样式语言，由风尚云网整合

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

发行时间
2009

设计者
Alexis Sellier

发行时间	2009
设计者	Alexis Sellier

一种动态样式语言.

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数

首先：导入使用less：

1在 Node.js 环境中使用 Less ：

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

一种动态样式语言.

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数

所以说如果对css有基础的话，less很容易上手的。因为css和less区别不大的，反正可以通过编译生成浏览器能识别的css文件。

首先：导入使用less：

1在 Node.js 环境中使用 Less ：

npm install -g less
> lessc styles.less styles.css

npm install -g less

2在浏览器环境中使用 Less ：

1.建立一个styles.less文件

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

2.引入less的cdn
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>


<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

　　变量：请注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次.

 // LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

/* 生成的 CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

// LESS

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

/* 生成的 CSS */

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* 生成的 CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

/* 生成的 CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

在客户端使用

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

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

然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:

<script src="less.js" type="text/javascript"></script>

注意你的less样式文件一定要在引入less.js前先引入。

备注：请在服务器环境下使用！本地直接打开可能会报错！

监视模式

监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。

要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。

在服务器端使用

安装

在服务器端安装 LESS 的最简单方式就是通过

最低0.47元/天解锁文章

11 条评论

Mr.Winter` 2021.12.23
不错的文章

尘~客 2021.12.23
介绍全面，思路清晰

YOLO~~~ 2021.12.23
好文支持[face]emoji:015.png[/face]

大拨鼠 2021.12.23
好文支持，期待回访[face]emoji:003.png[/face]

小满大王i 2021.12.21
厉害了

南城以南1 2021.12.20
好文三连

自首的小偷 2021.12.20
膜拜大佬

聆听逝去的流 2021.12.20
很赞[face]emoji:015.png[/face]

ΘLLΘ 2021.12.20
支持大佬

知心宝贝 2021.12.20
三连支持博主，期待回访[face]emoji:008.png[/face]
- 风尚云网回复知心宝贝 2021.12.20
  收到

less的了解及基本使用

一种 动态 样式 语言.

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数

首先：导入使用less：

1在 Node.js 环境中使用 Less ：

2在浏览器环境中使用 Less ：

变量

混合

嵌套规则

函数 & 运算

在客户端使用

监视模式

在服务器端使用

安装

11 条评论

一种动态样式语言.

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数