less

千次阅读

2022-06-30 14:26:10

文章目录

1．命令格式
2．命令功能
3．命令参数
4．按键操作
5．示例
5．附加备注

less命令也是对文件或其它输出进行分页显示的工具，功能极其强大。less 的用法比起 more 更加有弹性。前面more介绍中，按b可以向前翻页，按空格向后翻页， less 可以使用 [pageup] [pagedown] 等按键的功能来往前往后翻看文件，更容易用来查看一个文件的内容！除此之外，在 less 里头可以拥有更多的搜索功能，不止可以向下搜，也可以向上搜。最主要的区别：less 在查看之前不会加载整个文件。

1．命令格式

less [参数]  文件

2．命令功能

less 与 more 类似，但使用 less 可以随意浏览文件，而且 less 在查看之前不会加载整个文件。显示方面，显示内容方式不是输出到窗口，而是类似vi打开的文件一样，退出按q。

3．命令参数

-b <缓冲区大小> 设置缓冲区的大小
-e 当文件显示结束后，自动离开
-f 强迫打开特殊文件，例如外围设备代号、目录和二进制文件
-g 只标志最后搜索的关键词
-i 忽略搜索时的大小写
-m 显示类似more命令的百分比
-N 显示每行的行号
-o <文件名> 将less 输出的内容在指定文件中保存起来
-Q 不使用警告音
-s 显示连续空行为一行
-S 行过长时间将超出部分舍弃
-x <数字> 将“tab”键显示为规定的数字空格

4．按键操作

/字符串：向下搜索“字符串”的功能
?字符串：向上搜索“字符串”的功能
n：重复前一个搜索(与 / 或 ? 有关)
N：反向重复前一个搜索(与 / 或 ? 有关)
b 向后翻一页
d 向后翻半页
h 显示帮助界面
Q 退出less 命令
u 向前滚动半页
y 向前滚动一行
空格键滚动一行
回车键滚动一页
[pagedown]：向下翻动一页
[pageup]：向上翻动一页

5．示例

1、查看文件内容

命令：

less test1.txt

输出：

ubuntu@VM-4-14-ubuntu:~/less$ less test1.txt
1
2
3
4
5
6
7
8
9
10
11
1
13
14
15
16
17
18
19
20

如果显示END了按 q退出，没有的情况下可以按page up page down 上下翻页，也可用上下键一行行上下翻动。

2、ps查看进程信息并通过less分页显示

命令：

ps -ef |less

输出：

UID          PID    PPID  C STIME TTY          TIME CMD
root           2       0  0 13:42 ?        00:00:00 [kthreadd]
root           3       2  0 13:42 ?        00:00:00 [rcu_gp]
root           4       2  0 13:42 ?        00:00:00 [rcu_par_gp]
root           5       2  0 13:42 ?        00:00:00 [kworker/0:0-events]
root           6       2  0 13:42 ?        00:00:00 [kworker/0:0H-kblockd]
root           7       2  0 13:42 ?        00:00:00 [kworker/0:1-events]
root           9       2  0 13:42 ?        00:00:00 [mm_percpu_wq]
root          10       2  0 13:42 ?        00:00:00 [ksoftirqd/0]
root          11       2  0 13:42 ?        00:00:00 [rcu_sched]
root          12       2  0 13:42 ?        00:00:00 [migration/0]
root          13       2  0 13:42 ?        00:00:00 [idle_inject/0]
root          14       2  0 13:42 ?        00:00:00 [cpuhp/0]
root          15       2  0 13:42 ?        00:00:00 [cpuhp/1]
root          16       2  0 13:42 ?        00:00:00 [idle_inject/1]
root          17       2  0 13:42 ?        00:00:00 [migration/1]
root          18       2  0 13:42 ?        00:00:00 [ksoftirqd/1]
root          20       2  0 13:42 ?        00:00:00 [kworker/1:0H-kblockd]
root          21       2  0 13:42 ?        00:00:00 [kdevtmpfs]
root          22       2  0 13:42 ?        00:00:00 [netns]
root          23       2  0 13:42 ?        00:00:00 [rcu_tasks_kthre]
root          24       2  0 13:42 ?        00:00:00 [kauditd]
root          25       2  0 13:42 ?        00:00:00 [khungtaskd]
root          26       2  0 13:42 ?        00:00:00 [oom_reaper]
root          27       2  0 13:42 ?        00:00:00 [writeback]
root          28       2  0 13:42 ?        00:00:00 [kcompactd0]
root          29       2  0 13:42 ?        00:00:00 [ksmd]
root          30       2  0 13:42 ?        00:00:00 [khugepaged]
root          76       2  0 13:42 ?        00:00:00 [kintegrityd]
root          77       2  0 13:42 ?        00:00:00 [kblockd]
root          78       2  0 13:42 ?        00:00:00 [blkcg_punt_bio]
root          80       2  0 13:42 ?        00:00:00 [tpm_dev_wq]
root          81       2  0 13:42 ?        00:00:00 [ata_sff]
root          82       2  0 13:42 ?        00:00:00 [md]
root          83       2  0 13:42 ?        00:00:00 [edac-poller]
root          84       2  0 13:42 ?        00:00:00 [devfreq_wq]
:

3、查看命令历史使用记录并通过less分页显示

命令：

history | less

输出：

1
    2  ls
    3  cd ..
    4  ls
    5  cd home/
    6  ls
    7  cd lighthouse/
    8  ls
    9  cd ~
   10  cd ../b
   11  cd ../../boot/
   12  ls
   13  cd ~
   14  cd -
   15  ls
   16  1.15.78.2011.15.78.2011.15.78.2011.15.78.201/boot$ cd -
   17  cd ../../boot/
   18  file or directory
   19  ntu:/$ cd ..
   20  ubuntu@VM-4-14-ubuntu:/$ ls
   21  bin  boot  cdrom  data  dev  etc  home  lib  lib32  lib64  libx32  lost+found  media  mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var
   22  ubuntu@VM-4-14-ubuntu:/$ cd home/
   23  ubuntu@VM-4-14-ubuntu:/home$ ls
   24  lighthouse  ubuntu
   25  ubuntu@VM-4-14-ubuntu:/home$ cd lighthouse/
   26  ubuntu@VM-4-14-ubuntu:/home/lighthouse$ ls
   27  cat  linux-mv  more  mv  test  test1  touch
   28  ubuntu@VM-4-14-ubuntu:/home/lighthouse$ cd ~
   29  ubuntu@VM-4-14-ubuntu:~$ cd ../b
   30  -bash: cd: ../b: No such file or directory
   31  ubuntu@VM-4-14-ubuntu:~$ cd ../../boot/
   32  ubuntu@VM-4-14-ubuntu:/boot$ ls
   33  config-5.4.0-109-generic  grub  initrd.img  initrd.img-5.4.0-109-generic  initrd.img.old  System.map-5.4.0-109-generic  vmlinuz  vmlinuz-5.4.0-10
9-generic  vmlinuz.old
   34  ubuntu@VM-4-14-ubuntu:/boot$ cd ~
   35  ubuntu@VM-4-14-ubuntu:~$ cd -
:

5、浏览多个文件

命令：

 less test1.txt test2.txt

执行结果

1
2
3
4
5
6
7
8
9
10
11
1
13
14
15
16
17
18
19
20
test1.txt (file 1 of 2) (END) - Next: test2.txt

说明：

输入 :n 后，切换到test2.txt，之后输入 :p后，切换到test1.txt

5．附加备注

全屏导航
- ctrl + F - 向前移动一屏
- ctrl + B - 向后移动一屏
- ctrl + D - 向前移动半屏
- ctrl + U - 向后移动半屏
单行导航
- j - 下一行
- k - 上一行
其它导航
- G - 移动到最后一行
- g - 移动到第一行
- q / ZZ - 退出 less 命令
其它有用的命令
- v - 使用配置的编辑器编辑当前文件
- h - 显示 less 的帮助文档
- &pattern - 仅显示匹配模式的行，而不是整个文件
标记导航
当使用 less 查看大文件时，可以在任何一个位置作标记，可以通过命令导航到标有特定标记的文本位置：
ma - 使用 a 标记文本的当前位置
'a - 导航到标记 a 处

linux 运维 ubuntu 服务器

更多相关内容

less-loader:编译不到CSS
2021-04-29 16:25:49

用于webpack的Less loader。少编译为CSS。入门首先，您需要安装less less-loader ： $ npm install less less-loader --save-dev 然后将加载程序添加到您的webpack配置中。例如： webpack.config.js module ...

收起
lesscss-java：用于Java的LESS CSS编译器
2021-03-02 17:47:32

适用于Java的官方LESS CSS编译器最新版本1.7.0.1.1-与1.7.0或更低版本兼容的1.1版本用于Java的LESS CSS编译器是一个用于将LESS源编译为CSS样式表的库。该编译器使用Rhino，Envjs（用JavaScript编写的模拟浏览器环境...

收起

JavaScript
animate.less:您可以将其放入任何网站的跨浏览器CSS动画的集合。最初源自Animate.css，但现在由Less.js...
2021-05-18 14:46:19

无动画 Less.js CSS编译器CSS动画框架...要在您的网站中使用Animate.less，只需将一个文件夹（ dist/less ）放到Less.js预处理器中，然后在该文件夹中compile animate.less文件。预处理器将生成一个animate.css样式表

收起
less.js, less 转 css 工具
2015-07-24 11:01:56

less.js, less 转 css 工具

收起
less ,移动端less常见问题处理
2018-01-31 09:17:57

less ,移动端less常见问题处理less ,移动端less常见问题处理less ,移动端less常见问题处理

收起
bootstrap-less-port：Bootstrap v4的Less端口
2021-01-31 17:29:29

这是的Less端口，因为Bootstrap现在使用Sass进行CSS预处理。这纯粹是一个Sass→Less端口：它不会以任何方式修改或建立在默认的Bootstrap样式上。该代码当前与对齐。它需要Less v3.9.0或更高版本才能进行编译。 ...

收起

less的了解及基本使用

千次阅读 多人点赞 2021-12-20 19:48:50

less的了解及基本使用

（图片来自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 的最简单方式就是通过 npm(node 的包管理器), 像这样:

$ npm install less

如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:

$ npm install less@latest

使用

只要安装了 LESS，就可以在Node中像这样调用编译器:

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});

上面会输出

.class {
  width: 2;
}

你也可以手动调用解析器和编译器:

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

配置

你可以向解析器传递参数:

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {
    tree.toCSS({ compress: true }); // Minify CSS output
});

在命令行下使用

你可以在终端调用 LESS 解析器:

$ lessc styles.less

上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:

$ lessc styles.less > styles.css

如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了.

LESS 语法

LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！

变量

很容易理解:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

输出:

#header { color: #6c94be; }

甚至可以用变量名定义为变量:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

解析后:

content: "I am fnord.";

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

混合

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

任何 CSS class, id 或者元素属性集都可以以同样的方式引入.

带参数混合

在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

然后在其他class中像这样调用它:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

我们还可以像这样给参数设置默认值:

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

所以现在如果我们像这样调用它的话:

#header {
  .border-radius;  
}

radius的值就会是5px.

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

输出:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

`@arguments` 变量

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

将会输出:

  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

模式匹配和导引表达式

有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：

.mixin (@s, @color) { ... }

.class {
  .mixin(@switch, #888);
}

如果想让.mixin根据不同的@switch值而表现各异，如下这般设置：

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

现在，如果运行:

@switch: light;

.class {
  .mixin(@switch, #888);
}

就会得到下列CSS:

.class {
  color: #a2a2a2;
  display: block;
}

如上，.mixin就会得到传入颜色的浅色。如果@switch设为dark，就会得到深色。

具体实现如下：

第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值

只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。

我们也可以匹配多个参数：

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

Now if we call .mixin with a single argument, we will get the output of the first definition, but if we call it with two arguments, we will get the second definition, namely @a faded to @b.

引导

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。

为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。

以此例做为开始：

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码：

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

就会得到：

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，下面两个混合是相同的：

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

除去关键字true以外的值都被视示布尔假：

.class {
  .truth(40); // Will not match any of the above definitions.
}

导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。

.mixin (@a) when (@a > 10), (@a < -10) { ... }

导引可以无参数，也可以对参数进行比较运算：

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

最后，如果想基于值的类型进行匹配，我们就可以使用is*函式：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

下面就是常见的检测函式：

iscolor
isnumber
isstring
iskeyword
isurl

如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：

ispixel
ispercentage
isem

最后再补充一点，在导引序列中可以使用and关键字实现与条件：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

使用not关键字实现或条件

.mixin (@b) when not (@b > 0) { ... }

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

在 LESS 中, 我们就可以这样写:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

或者这样写:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

代码更简洁了，而且感觉跟DOM结构格式有点像.

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

例如:

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

会输出

.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

运算

任何数字、颜色或者变量都可以参与运算. 来看一组例子:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: 1px + 5;

LESS 会输出 6px.

括号也同样允许使用:

width: (@var + 5) * 2;

并且可以在复合属性中进行运算:

border: (@width * 2) solid black;

Color 函数

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:


lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

使用起来相当简单:

@base: #f04615;

.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

你还可以提取颜色信息:

hue(@color);        // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color);  // returns the 'lightness' channel of @color

如果你想在一种颜色的通道上创建另一种颜色，这些函数就显得那么的好用，例如:

@new: hsl(hue(@old), 45%, 90%);

@new 将会保持 @old的色调, 但是具有不同的饱和度和亮度.

Math 函数

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`

如果你想将一个值转化为百分比，你可以使用percentage 函数:

percentage(0.5); // returns `50%`

命名空间

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

你只需要在 #header a中像这样引入 .button:

#header a {
  color: orange;
  #bundle > .button;
}

作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}

注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

Importing

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以:

@import "lib.css";

这样LESS就会跳过它不去处理它.

字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:


.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

我们可以将要避免编译的值用 “”包含起来，输出结果为:


.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

JavaScript 表达式

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

@var: `"hello".toUpperCase() + '!'`;

输出:

@var: "HELLO!";

注意你也可以同时使用字符串插值和避免编译:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

输出:

@var: HELLO!;

它也可以访问JavaScript环境:

@height: `document.body.clientHeight`;

如果你想将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 color 函数:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

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

收起

展开全文

css css3 javascript

前端基础入门之css less
千次阅读 2022-06-20 22:37:30
less 代码创建文件，编写代码插件会帮助我们在所在目录下面生成一个相同名称的文件查看生成的代码我们直接在 HTML 中引入生成的运行代码，查看效果中的单行注释，注释中的内容不会被解析到中中的注释，内容会被...
文章目录

less 简介
1、安装插件
2、编写 less
3、less 语法
less 注释
父子关系嵌套
变量
其他

4、混合函数
其他

5、补充
less 简介

less是一门css的预处理语言
- less是一个 css 的增强版，通过less可以编写更少的代码实现更强大的样式
- 在less中添加了许多的新特性：像对变量的支持、对mixin的支持…
- less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行
1、安装插件

在vscode中搜索less，点击安装

2、编写 less

html 代码

使用快捷方式创建html代码

回车生成html代码
```
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
```
less 代码

创建style.less文件，编写less代码
```
body {
  --height: calc(200px / 2);
  --width: 100px;
  div {
    height: var(--height);
    width: var(--width);
  }
  .box1 {
    background-color: #bfa;
  }
  .box2 {
    background-color: red;
  }
  .box3 {
    background-color: yellow;
  }
}
```
Easy LESS插件会帮助我们在style.less所在目录下面生成一个相同名称的css文件

查看生成的style.css代码
```
body {
  --height: calc(200px / 2);
  --width: 100px;
}
body div {
  height: var(--height);
  width: var(--width);
}
body .box1 {
  background-color: #bfa;
}
body .box2 {
  background-color: red;
}
body .box3 {
  background-color: yellow;
}
```
我们直接在 HTML 中引入生成的style.css
```
<link rel="stylesheet" href="/css/style.css" />
```
运行代码，查看效果

3、less 语法

less 注释

less中的单行注释，注释中的内容不会被解析到css中

css中的注释，内容会被解析到css文件中
```
// `less`中的单行注释，注释中的内容不会被解析到`css`中

/*
`css`中的注释，内容会被解析到`css`文件中
*/
```
父子关系嵌套

在less中，父子关系可以直接嵌套
```
// `less`中的单行注释，注释中的内容不会被解析到`css`中

/*
`css`中的注释，内容会被解析到`css`文件中
*/
body {
  --height: calc(200px / 2);
  --width: 100px;
  div {
    height: var(--height);
    width: var(--width);
  }
  .box1 {
    background-color: #bfa;
    .box2 {
      background-color: red;
      .box3 {
        background-color: yellow;
      }
      > .box4 {
        background-color: green;
      }
    }
  }
}
```
对应的css
```
/*
`css`中的注释，内容会被解析到`css`文件中
*/
body {
  --height: calc(200px / 2);
  --width: 100px;
}
body div {
  height: var(--height);
  width: var(--width);
}
body .box1 {
  background-color: #bfa;
}
body .box1 .box2 {
  background-color: red;
}
body .box1 .box2 .box3 {
  background-color: yellow;
}
body .box1 .box2 > .box4 {
  background-color: green;
}
```
变量

变量，在变量中可以存储一个任意的值

并且我们可以在需要时，任意的修改变量中的值

变量的语法：@变量名
- 直接使用使用变量时，则以@变量名的形式使用即可
- 作为类名、属性名或者一部分值使用时，必须以@{变量名}的形式使用
- 可以在变量声明前就使用变量（可以但不建议）
```
@b1:box1;
@b2:box2;
@b3:box3;
@size:200px;
@bc:background-color;
@bi:background-image;
@color:red;
@path:image/a/b/c;

.@{b1}{
  width: @size;
  height: $width;
  @{bc}: @color;
  @{bi}: url("@{path}/1.png");
}

.@{b2}{
  width: @size;
  height: $width;
  @{bc}: @color;
  @{bi}: url("@{path}/2.png");
}

.@{b3}{
  width: @size;
  height: $width;
  @{bc}: @color;
  @{bi}: url("@{path}/3.png");
}
```
生成的css代码
```
.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/1.png");
}
.box2 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/2.png");
}
.box3 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/3.png");
}
```
注意：在url中使用less语法需要用引号包裹

其他
```
.p1 {
  width: @size;
  height: $width;
  &-wrapper {
    background-color: peru;
  }
  // &:hover{
  //   background-color: blue;
  // }
  :hover {
    background-color: blue;
  }
}
.p2:extend(.p1) {
  color: @color;
}
.p3 {
  .p1();
}
.p4() {
  width: @size;
  height: $width;
}
.p5 {
  // .p4();
  .p4;
}
```
生成的css代码
```
.p1,
.p2 {
  width: 200px;
  height: 200px;
}
.p1-wrapper {
  background-color: peru;
}
.p1 :hover {
  background-color: blue;
}
.p2 {
  color: red;
}
.p3 {
  width: 200px;
  height: 200px;
}
.p5 {
  width: 200px;
  height: 200px;
}
```
- & 拼接
- 伪元素
- :extend() 对当前选择器扩展指定选择器的样式（选择器分组）
- .p1() 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制（mixin 混合）
- 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins混合函数
4、混合函数

在混合函数中可以直接设置变量，并且可以指定默认值
```
.test(@w:200px, @h:100px, @bc:red) {
  width: @w;
  height: @h;
  background-color: @bc;
}

.p6 {
  // .test(200px, 100px, red); // 对应参数位传值
  // .test(@h:200px,@w:100px,@bc:red); // 写明对应属性，可变换顺序
  // .test();
  .test(300px);
}
```
生成的css代码
```
.p6 {
  width: 300px;
  height: 100px;
  background-color: red;
}
```
其他
- average混合函数
  
  .h1 { color: average(red, yellow); }
  
  生成的css代码
  
  .h1 { color: #ff8000; }
- darken混合函数
  
  body { background-color: darken(#bfa, 50%); }
  
  生成的css代码
  
  body { background-color: #22aa00; }
5、补充

创建all.less文件，将我们之前编写的less文件通过@import引入进来

可以通过import来将其他的less引入到当前的less中
```
@import "style.less";
@import "syntax.less";
```
查看生成的all.css代码，会发现其他的内容囊括了两个less文件的内容

所以，我们可以利用@import来对less文件进行整合，然后引入生成的css文件使用即可

这样，每次修改的时候直接对某个模块的less文件进行修改，就会非常简单

如果我们观察过之前fontawesome源码文件，会发现其中也有less代码文件

不同的less文件里都有其自己的职责，如
- _animated.less中专门存放动画的混合函数
- _variables.less中专门存放定义的变量
- …
但是也有个问题，通过F12调试时显示的也是css中对应的行号

如果我们要改，需要找一下，太麻烦了，能不能直接显示less中行号呢？这样我们直接定位到对应less中直接进行修改，维护起来也会比较方便

我们需要在Easy LESS插件中修改settings.json文件，在其中添加如下配置
```
"less.compile": {
    "compress": true, // true => remove surplus whitespace
    "sourceMap": true, // true => generate source maps (.css.map files)
    "out": true // false => DON'T output .css files (overridable per-file, see below)
}
```
修改完毕后，会发现多生成出来一个all.css.map文件，说明配置生效

再刷新下页面，通过F12会发现变成了less文件对应的行号

我们来逐一解释下配置的less.compile项中每一个属性的含义
- compress 生成的css文件代码会被压缩（作用相当于我们之前安装的JS & CSS Minifier (Minify)插件的效果）
- sourceMap 生成.css.map文件，通过F12可以查看了less文件对应行号
- out 生成对应css文件（当然是需要了）
收起
展开全文
css
less基础详解
万次阅读 多人点赞 2020-11-25 18:40:58
1.初识less less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低...
1.初识less

less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。

和css相比下，css的语法非常简单，而且对开发者来说要求比较低，比较合适小白者，但是遇到有些问题，比如没有这种变量、函数等等，的确还不如less的扩展性，需要写大量的代码，但是看眼中的确没有逻辑的代码，CSS冗余度是比较高的。不方便维护，不利于复用，而且没有计算的能力。

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

2.less使用

这个less使用不用复杂，就是新建一个后辍名为less文件即可，然后在less文件使用less语句，当写完less语句编译后就会自动生成多了一个后辍名为css文件即可。

3.less和css简单的语句区别

style.less

style.css

相比一下，还是感觉less语句的代码比较舒服，以上代码内容就是叫嵌套写法，这样的话大大减少了代码量，less代码看起来更加清晰。

4.less语法

4.1变量（variables）

4.1.1普通的变量

变量的定义方式为@，可以赋给变量！

语法：@变量名：值。

less：
```
// 1.普通的变量
@bgColor:white;
@Height:50rpx;
.contain{
    background-color: @bgColor;

}
.row{
    height:@Height;
    margin-left:@Height;
}   
```
编译后的css：
```
.contain {
  background-color: white;
}
.row {
  height: 50rpx;
  margin-left: 50rpx;
}
```
注意：最好尽量用全局变量，避免无法复用！比如我写变量(Height)在contain{}里面，但却row{}里面的变量不存在，导致出错，这是叫局部变量。

4.1.2选择器和属性名

这个选择器和属性名可以均作为变量

语法：@选择器的名：属性名；
```
// 2.作为选择器和属性名

@Mycontain:width;

.@{Mycontain}{//选择器
    height:300rpx;
    @{Mycontain}:200rpx;//属性名
}
```
编译后的css：
```
.width {
  height: 300rpx;
  width: 200rpx;
}
```
4.1.3作为URL

使用时候，使用“ ”将变量的值扩起来，使用同样将变量以@{变量名}的方式使用；

语法：@变量：作路径；

less：
```
// 3.作为URL
@img-url:"../imgs/idnex";
img{
    background-image: url("@{img-url}/shouye.png");
}
```
编译后的css：
```
img {
  background-image: url("../imgs/idnex/shouye.png");
}
```
4.1.4延迟加载

什么是延迟加载？变量是延迟加载的，在使用前不一定要预先声明。

语法：@变量1：@变量2；

@变量2:9%；

less:
```
// 4.延迟加载
.lazy-eval{
    width:@var;
}

@var:@a;
@a:9%;
```
编译后的css：
```
.lazy-eval {
  width: 9%;
}
```
4.1.5定义多个相同名称的变量时

在定义一个变量两次时，只会使用最后定义的变量，less会从当前作用域向上搜索（比如就是从下往上搜索）。这个行为类似于CSS的定义中始终使用最后定义的属性值。

less：
```
.class{
    @var:1;
    @var:2;//选中的搜索
    .brass{
        @var:2;
        three:@var;//结果为three:4;
        @var:3;
        @var:4;//选中的搜索
    }
    one:@var;//结果为one:2;
}
```
编译后的css：
```
.class {
  one: 2;
}
.class .brass {
  three: 4;
}
```
5.1混合（mixins）

5.1.1 普通混合

混合就是一种将一系列属性从一个规则引入（“混合”）到另一个规则集的方式。这个意思是在less中定义的选择器类可以直接放入其他选择器类里面，这种重复使用很强。

less：
```
//1.普通混合
.bor{
    background-color: aqua;
    width: 32rpx;
}
.poop{
    color:white;
    .bor;
}

.boom{
    height:200rpx;
    .bor;
}
```
编译后的css：
```
.bor {
  background-color: aqua;
  width: 32rpx;
}
.poop {
  color: white;
  background-color: aqua;
  width: 32rpx;
}
.boom {
  height: 200rpx;
  background-color: aqua;
  width: 32rpx;
}
```
5.1.2不带输出的混合

如果你想要创建一个混合的类，但是我不想让它输出到css的样式并显示。

只要类的名字后面加上括号，就可以实现的，这样不会到css样式中显示！

less：
```
// 2.不带输出的混合
.mymix{
    color:black;
}
.mymix-echa(){//css样式中不显示
    background-color: white;

}
.dad{
    width: 30rpx;
    height:30rpx;
}
```
编译后的css:
```
.mymix {
  color: black;
}
.dad {
  width: 30rpx;
  height: 30rpx;
}
```
在css样式中实现不显示.mymix-echa()类。

5.1.3带选择器的混合

这个带选择器，可以放入选择器。

语法：{&：选择器}

less：
```
//3.带选择器的混合
.father(){
    &:hover{
        background-color: white;
        font-size:32px;
    }
}

.child{//类名字后面多了:hover
    .father;
}
.son{//类名字后面多了:hover
    .father;
}
```
编译后的css:
```
.child:hover {
  background-color: white;
  font-size: 32px;
}
.son:hover {
  background-color: white;
  font-size: 32px;
}
```
5.1.4带参数的混合

带参数就是传递参数。

语法：类的名称（形参）{}

less:
```
// 4.带参数的混合
.son(@width){
    width:@width;
}
.dad{
    .son(300px);//需要传一个参数进去
}
```
编译后的css:
```
.dad {
  width: 300px;
}
```
那如果形参如何使用默认值呢？

形参是可以默认值，这样不需要传递参数，如下：

less：
```
//5.带参数的混合默认值
.son(@width:200px){
    width:@width;
}
.dad{
    .son();
}
```
编译后的css：
```
.dad {
  width: 200px;
}
```
5.1.5带多个参数的混合

一个组合可以带多个参数，参数之间可以使用分号或者逗号来分割。

比如：.mini(形参1；形参2)这代表是分号；.mini(形参1，形参2)这代表是逗号。

但是建议尽量使用分号来分隔，因为这逗号可以编译为参数分割或者css为列表分割。

（1）如果两个参数，而且每个参数都是逗号分割的列表，最后到分号表示结束：.mini(1,2,3;something, ele);

less:
```
//6.带多个参数的混合
.mini(@color;@padding:xxx;@margin:2){
    color-1:@color;
    padding-2:@padding;
    margin-3:@margin;
}
.div{
    .mini(1,2,3;something, ele);
}
```
编译后的css：
```
.div {
  color-1: 1, 2, 3;
  padding-2: something, ele;
  margin-3: 2;
}
```
分析：在less的.div{.mini（1,2,3;something,ele）}参数只有两个，那么就会传到形参1和形参2，但由于形参3有默认值，所以生成编译后css的结果（如上）。

（2）如果三个参数里面都是逗号来分割，就会传到各种参数：.mini(1,2,3)。

less:
```
//6.带多个参数的混合
.mini(@color;@padding:xxx;@margin:2){
    color-1:@color;
    padding-2:@padding;
    margin-3:@margin;
}
.div1{
    .mini(1,2,3);
}
```
编译后的css：
```
.div1 {
  color-1: 1;
  padding-2: 2;
  margin-3: 3;
}
```
分析：由于参数都是三个，而且采用逗号进行分割，就会传到形参1，形参2，形参3，生成了编译后css的结果（如上）。

（3）如果参数里面有逗号，也有分号，那么会传到第一个参数，也就是说传到形参1：.mini(1,2,3;);

less:
```
//6.带多个参数的混合
.mini(@color;@padding:xxx;@margin:2){
    color-1:@color;
    padding-2:@padding;
    margin-3:@margin;
}
.div2{
    .mini(1,2,3;);
}
```
编译后的css:
```
.div2 {
  color-1: 1, 2, 3;
  padding-2: xxx;
  margin-3: 2;
}
```
分析：多个参数里面有逗号，也有分号，整个多个参数的值就会传到形参1，而且形参2和形参3有默认值，生成了编译后css的结果（如上）。

5.1.6 arguments变量

arguments变量表示可变参数，意思是形参从先到后的顺序。注意：这个是参数值位置必须是一一对应。

less:
```
//7.arguments变量
.son3(@dd1:20px;@dd2:solid;@dd3:white){
    border:@arguments;
}
.div4{
    .son3();
}
```
编译后的css:
```
.div4 {
  border: 20px solid white;
}
```
6.1匹配模式

当传值的时候定义一个字符，在使用那个一个字符，就调用规则集。

less：
```
// 8.匹配模式
.border(all,@w){
    border-radius: @w;
}

.border{
    .border(all,50%);
}
```
编译后的css：
```
.border {
  border-radius: 50%;
}
```
7.1得到混合中的变量的返回值

就像调用函数一样的过程。

less：
```
//9.得到混合中变量的返回值
.ave(@x,@y){
    @ave:(@x+@y);
}
.son{
    .ave(20px,40px);
    width:@ave;
}
```
编译后的css：
```
.son {
  width: 60px;
}
```
分析代码过程：

1.首先把二个参数分别为20px和40px传到.ave(@x,@y)；

2.在.ave{}里面获取了两个值并进行计算结果，然后给变量@ave；

3.在.son{}中调用了@ave的值；

4.最后生成了编译后css的结果width为60px。

8.1嵌套规则（nested-rules)

8.1.1普通的写法

less:
```
//10.嵌套规则
.contain{
  .dad{
      width:30px;
      background-color: #fff;
      .son{
          border-radius: 40px;
      }
  }  
  .dad1{
      height:300px;
      background-color: black;
  }
}
```
编译后的css：
```
.contain .dad {
  width: 30px;
  background-color: #fff;
}
.contain .dad .son {
  border-radius: 40px;
}
.contain .dad1 {
  height: 300px;
  background-color: black;
}
```
less写法结构当然很清晰，后期有利于维护，非常简便。

8.1.2父元素选择器&

表示当前选择器的所有父选择器，使用&符引用选择器的名。

less:
```
//11.父元素选择器&
.bgcolor{
    background: black;
    a{
        color:#fff;
        &:hover{
            color:blue;
        }
    }
}
```
编译后的css：
```
.bgcolor {
  background: black;
}
.bgcolor a {
  color: #fff;
}
.bgcolor a:hover {
  color: blue;
}
```
或者也可以用这个

less：
```
.contain{
    &>p{
        color:red;
    }
    &+.contain{
        background-color: black;
    }
    & div{
        width: 300px;
    }
}
```
编译后的css:
```
.contain > p {
  color: red;
}
.contain + .contain {
  background-color: black;
}
.contain div {
  width: 300px;
}
```
8.1.3改变选择器的顺序&

如果将当前的选择器名字后面放在&，就会当前的选择器提到父级。

less：
```
// 12.改变选择器的顺序&
.contain{
    h1&{
        width:200px;
        height:300px;
    }
}

#son{
    ul{
        li{
            .contain&{
                height:100px;
                background-color: #fff;
            }
        }
    }
}
```
编译后的css：
```
h1.contain {
  width: 200px;
  height: 300px;
}
.contain#son ul li {
  height: 100px;
  background-color: #fff;
}
```
9.1运算（operations）

任何数值，颜色和变量都可以计算的，less当然会自动推断数值的单位，所以不必每一个值都加上单位。

less:
```
// 13.运算
.contain{
    font-size:300px+200*2;
}
```
编译后的css：
```
.contain {
  font-size: 700px;
}
```
10.1 命名空间

如果将一些变量或者混合块一起打包起来，这样可以支持复用性，也可以通过嵌套多层id或者class来实现。

使用#contain()来作为命名空间，而且是在css样式中不会显示#contain()命名空间。

less:
```
// 14.命名空间
//实例1
#contain(){//加()，表示css不输出
    background-color: blue;
    .dad{
        width:300px;
        &:hover{
            height:200px;
        }
    }
    .father{
        width:100px;
        height:200px;
    }
}

//实例2
.tiweq(){
    color:#fff;
    height:200px;
    .eitw{
        width:100px;
        border:200px;
    }
}

//到css中显示
.contain1{
    background-color: aqua;
    #contain>.dad;
}

.contain2{
    .tiweq>.eitw;
}
```
编译后的css：
```
.contain1 {
  background-color: aqua;
  width: 300px;
}
.contain1:hover {
  height: 200px;
}

.contain2 {
  width: 100px;
  border: 200px;
}
```
分析：如果在命名空间中想获取的某样式中，比如想要获取dad{..}模块里面数据的话，那么写#contain>.dad即可，然后到css中就会显示你需要的数据；

另外，最省略就是“>”写法。只要你不写“>”，一样都可以获取数据。

less：
```
// 14.命名空间
.tiweq(){
    color:#fff;
    height:200px;
    .eitw{
        width:100px;
        border:200px;
    }
}
.cotain3{
    .tiweq .eitw;
    
}
```
编译后css：
```
.cotain3 {
  width: 100px;
  border: 200px;
}
```
11.1作用域

less中的作用域与编程语言中的作用域概念非常类似。首先会在局部查找变量和混合，如果没找到，编辑器就会在父作用域中查找，以此类推。

less:
```
//15.作用域 
@clolor:#ffffff;

.contain{
  width: 50px;
  a{
    color: @clolor;
  }
  @clolor:blue;
}
```
编译后的css：
```
.contain {
  width: 50px;
}
.contain a {
  color: blue;
}
```
12.1引入（importing）

可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用！比如我有一个main.less文件，而且里面有变量，所以想引入这个main.less文件并使用它的变量。

main.less
```
@baby:300px;
```
index.less
```
//16.引入
@import "../main";//引入main.less文件

.contain-qq{
    width:@baby;
}
```
index.css
```
.contain-qq {
  width: 300px;
}
```
另外可带参数：
```
//@import "main.less";
//@import (reference) "main.less";  //引用LESS文件，但是不输出
//@import (inline) "main.less";  //引用LESS文件，但是不进行操作
//@import (once) "main.less";  //引用LESS文件，但是进行加工，只能使用一次
//@import (less) "index.css";  //无论是什么格式的文件，都把它作为LESS文件操作
//@import (css) "main.less";  //无论是什么格式的文件，都把它作为CSS文件操作
@import (multiple) "../main.less";  //multiple，允许引入多次相同文件名的文件
@import (multiple) "../main.less";  //multiple，允许引入多次相同文件名的文件
```
13.1函数库（function）

这个函数库里面很多各种函数，而且内容有点多，有空会补上Less函数库。

金句：不只是学习一门语言，而且要多练习多敲代码，这样才有进步的效果。

欢迎各位大佬评论、点赞和收藏！Thanks
收起
展开全文
css 编程语言
VSCode 使用 LESS
千次阅读 2022-02-15 14:16:05

新建项目选择类型为 LESS，即可创建 LESS 文件（或直接将文件名定为 .less 后缀） test.less @width: 200px; @height: @width / 2; .red-font { color: red; text-align: center; } .yellow-bg { background-...

收起

vscode css
metalsmith-less:适用于Metalsmith的LESS插件
2021-05-23 20:51:45

安装 npm install metalsmith-less用法 var less = require ( 'metalsmith-less' )new Metalsmith ( __dirname ) . use ( less ( options ) ) . build ( )options Object pattern String|Array<String> 用于过滤...

收起

JavaScript
web前端之Less的详解
千次阅读 2021-06-08 23:38:01

Less的详解 CSS 预处理器为什么要有 CSS 预处理器 CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件...

收起

css
less混合 + less计算
千次阅读 2020-11-01 16:53:08

less中的混合混合的意思：混合就是将一系列属性从一个规则集引入到另一个规则集的方式通俗来讲，规则集即指一套代码，一套定义一定规则的代码，比如一套定义样式的代码，就是一个规则集比如：这里面的样式就是...

收起
vue安装less、less-loader
千次阅读 2022-05-27 06:45:38

最近安装这个less一直报错，要么是less要么是less-loader，各种百度各种不行，最终我这个方法安装成功了 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/...

收起

vue.js
在项目中安装、使用less-loader、less用于处理less格式文件
千次阅读 2022-02-15 10:40:28

在项目中安装、使用less-loader、less用于处理less格式文件1、安装配置2、配置3、案例：使用less-loader和less 在项目中安装less-loader，用于加载less文件 webpack中文网安装less-loader参考 1、安装配置版本号与...

收起

webpack
linux中less命令使用
千次阅读 2021-05-17 20:39:24

less与cat和more的区别：cat命令功能用于显示整个文件的内容单独使用没有翻页功能因此经常和more命令搭配使用，cat命令还有就是将数个文件合并成一个文件的功能。more命令功能：让画面在显示满一页时暂停，此时可按...

收起
less 什么是less 怎么使用less
千次阅读 2020-06-10 12:14:18

什么是less？作为一个前端开发，写css样式是再平常不过的事情了，有时候，多个元素的样式是一样的，但是我们还是会把这些样式冲刺呢写一遍，要不就是键盘三剑客 CTRL + C，CTRL + v，真是苦了比程序猿，现在，我们...

收起

css
LESS 和 SCSS 的区别
千次阅读 2022-04-28 21:23:52

LESS 和 SCSS 的区别相同点： 1. LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。 2. 都可以通过自带的插件，转成相对应的css文件。 3. 都可以参数...

收起

sass web
CSS——less
千次阅读 2022-04-09 16:33:00

1、less简述 less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。在px单位转换到rem单位过程中，哪项工作是最...

收起

css3
less-skelvanilla:LimeSurvey主题的更少生成器
2021-04-19 01:22:47

LimeSurvey的基本较少生成器从引导程序更新允许使用rem 将当前字体大小设置为rem 增加更多使用当前变量的方式以进行不同的变化 ...将您的variables.less文件放入您想要的名称的mytheme.less -variables目录中（示例

收起
sqlilab学习打卡|手工注入|Less46-Less65
千次阅读 2022-04-06 18:59:44

sqlilab学习打卡|手工注入|Less46-Less65

收起

网络安全 web安全
Vue中使用less
千次阅读 2022-01-30 19:38:04

Vue中使用Less 一、Vue中安装Less 二、使用手册中文官网：https://less.bootcss.com/#%E6%A6%82%E8%A7%88 变量： @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

收起

vue.js
less语法详解
万次阅读 多人点赞 2019-06-16 18:26:18

Less为什么出现？作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往...

收起
Sass和Less的区别，应该选less还是sass
千次阅读 2022-01-30 17:31:11

Sass和Less的区别简述 sass和less都是css的预编辑语言，引入了mixins、参数、嵌套、运算、颜色、命名空间、作用域、赋值。主要区别：less是基于JavaScript在客户端处理，引入less.js就可以处理。sass是基于ruby在...

收起

sass css
项目中安装 less 和 less-loader 命令
千次阅读 2022-01-20 09:39:01

npm install less less-loader@6.0.0 --save-dev 或者 yarn命令如下： yarn add less less-loader@6.0.0 --dev 注意：不指定less-loader@6.0.0版本，会安装最高版本的less-loader，报TypeError: this.getOptions ...

收起
hash-less:Groovy 少编译器
2021-06-22 21:15:14

＃较少的#Less 或 Hash-Less 是 Less 命令行的实现。它是用 Groovy 编写的，并使用核心 JavaScript和作为库将 Less 样式表编译为 CSS。 NodeJS 中可用的许多编译器选项正在移植到 Groovy 版本。 #Less 可以集成为...

收起

JavaScript
less安装和在Vscode使用less
千次阅读 2021-08-30 18:21:45

1、less安装教程（1）先检查node和npm版本，查看是否安装下载好node （2）使用npm命令安装less npm install less -g 检测less是否成功，使用命令：lessc -v 或 lessc --version。 2、less转css （1）...

收起

vscode vue.js
less文档和安装
千次阅读 2022-03-28 17:12:12

中文文档：https://less.bootcss.com/ GitHub：https://github.com/less/less.js gitee：https://gitee.com/mirrors/less.js?_from=gitee_search 详细教程 Less知识点整理（一）...

收起
什么是LeSS框架？Scrum / LeSS / LeSS Huge
千次阅读 2019-12-02 14:09:10

LeSS是一个轻量级的敏捷框架，用于将Scrum扩展到多个团队。从2005年开始，Bas Vodde和Craig Larman在大型项目中使用Scrum原则和规则后开发了LeSS框架。他们的目标是在不受Scrum约束的情况下成功开发大型项目。 LeSS...

收起

文章目录

1．命令格式

2．命令功能

3．命令参数

4．按键操作

5．示例

1、查看文件内容

2、ps查看进程信息并通过less分页显示

3、查看命令历史使用记录并通过less分页显示

5、浏览多个文件

5．附加备注

less-loader:编译不到CSS

lesscss-java：用于Java的LESS CSS编译器

animate.less:您可以将其放入任何网站的跨浏览器CSS动画的集合。 最初源自Animate.css，但现在由Less.js...

less.js, less 转 css 工具

less ,移动端less常见问题处理

bootstrap-less-port：Bootstrap v4的Less端口

less的了解及基本使用

一种 动态 样式 语言.

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

首先：导入使用less：

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

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

变量

混合

嵌套规则

函数 & 运算

在客户端使用

监视模式

在服务器端使用

安装

使用

配置

在命令行下使用

LESS 语法

变量

混合

带参数混合

@arguments 变量

模式匹配和导引表达式

引导

嵌套规则

运算

Color 函数

Math 函数

命名空间

作用域

注释

Importing

字符串插值

避免编译

JavaScript 表达式

前端基础入门之css less

文章目录

less 简介

1、安装插件

2、编写 less

3、less 语法

less 注释

父子关系嵌套

变量

其他

4、混合函数

其他

5、补充

less基础详解

1.初识less

2.less使用

3.less和css简单的语句区别

4.less语法

4.1变量（variables）

4.1.1普通的变量

4.1.2选择器和属性名

4.1.3作为URL

4.1.4延迟加载

4.1.5定义多个相同名称的变量时

5.1混合（mixins）

5.1.1 普通混合

5.1.2不带输出的混合

5.1.3带选择器的混合

animate.less:您可以将其放入任何网站的跨浏览器CSS动画的集合。最初源自Animate.css，但现在由Less.js...

一种动态样式语言.

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

`@arguments` 变量