【笔记】less命令 - 查看文件内容

外置命令，less 命令的作用和 more 十分类似，使用 more 命令浏览文件内容时，只能不断向后翻看，而使用 less 命令浏览，既可以向后翻看，也可以向前翻看。

在使用 less 命令查看文件内容的过程中，和 more 命令一样，也会进入交互界面，less 交互指令及功能：

可以看到，less 在屏幕底部显示一个冒号（：），等待用户输入命令，比如说，用户想向下翻一页，可以按空格键；如果想向上翻一页，可以按 b 键。

既然你的文件类型是less的，那么你在引用的时候type的类型也应该是less的

如：

<link rel="stylesheet/less" type="text/css" href='/less/mainless'/>

<scriptsrc="/js/less-160minjs"type="text/javascript"></script>

<script>lesswatch();</script>

HTML

超文本标记语言，标准通用标记语言下的一个应用。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

语言特点：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（>

通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

less 在查看之前不会加载整个文件。可以尝试使用 less 和 vi 打开一个很大的文件，你就会看到它们之间在速度上的区别。 在 less 中导航命令类似于 vi。本文中将介绍一些导航命令以及使用 less 的其它一些技巧。 1 搜索 当使用命令 less file-nam

webstorm 里的file watcher就是用来将less文件自动生成css文件的，在使用file watcher之前你需要安装nodejs并在node环境下安装less，安装完毕后webstorm会自动捕捉到lessccmd的安装路径，你也可以在settings→Tools→file Watcher下添加新的watcher，配置好之后，你编写的less文件就会自动转译成css文件。

使用npm安装less

安装less-loader

注意使用高版本run serve会有问题 这里使用的7x版本

安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader

在vueconfigjs文件中配置

注意目录配置方式 /src/assets/css/baseless 修改你全局less文件所在的位置 目录不可使用简写方式 例如 @/assets 方式

使用方式

注：不需要在任何地方导入less文件就可以使用了

使用npm安装less和less-loader

注意：此处也可以合并指令

在 viteconfigts 文件中配置

使用npm安装less和less-loader

注意：此处也可以合并指令，也可以简写

在 viteconfigts 文件中配置

样式的使用方式是跟之前的一样，文中也有提到，可以翻看记录。

点赞加关注，永远不迷路

LESS ：一种动态样式语言。
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数 LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Nodejs或者Rhino在服务端运行。
在介绍如何通过 lessc （less源码编译器）把编写好的less文件生成css文件之前，非常有必要了解一下NodeJS。
一、初识Nodejs
Nodejs不是JS应用、而是JS运行平台，负责执行服务器端的Javascript代码。事实上，Nodejs采用C++语言编写而成，是一个Javascript的运行环境。
Nodejs采用了Google Chrome浏览器的V8引擎，性能很好，同时还提供了很多系统级的API，如文件 *** 作、网络编程等。
要想了解更多NodeJS，请参考《深入浅出Nodejs》前两篇文章即可
1）深入浅出Nodejs（一）：什么是Nodejs
2）深入浅出Nodejs（二）：Nodejs&NPM的安装与配置（PS：安装最新版本的NodeJS已默认自带了NPM，无需通过GitHub去安装）
我本机的NodeJS默认安装在D:\nodejs\目录下，如图
启动nodejs，查看版本
二、安装LESS包
通过npm install -d less命令安装LESS包。
为了将less包安装在nodejs的node_modules目录下，可以先进入d:盘，然后使用该命令
LESS包安装完成后，进入D:\nodejs\node_modules\，该目录下有三个目录，分别为less，npm和bin（该目录下有lessc编译器），把D:\nodejs\node_modules\bin添加到环境变量中。
三、编写less文件并编译它
这是一个简单的测试代码testless，内容如下
复制代码
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
复制代码
该文件位于 E:\Code\VS2013\BootstrapDemo\LessDemo\Less\testless。
启动nodejs控制台，进入testless文件所在的目录，输入lessc testless > testcss命令，less文件就会被编译成css文件
打开生成的testcss 文件

Grunt任务分为两部分，一部分是任务，即Grunt要执行的代码，找到对应功能的插件就成。所以等会要下载grunt-contrib-less包，这个插件便是把less文件编译成能直接使用的css。另一部分是配置，即传给gruntinitConfig方法的对象。
步骤一：在终端安装插件 同样使用到了nodejs里的包管理器npm，在终端里执行下述命令：
1
npm install grunt-contrib-less --save-dev
–save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。要注意安装的目录应该是你的项目的根目录，而且本地已经装好了grunt，建立了packagejson文件。packagejson文件中无法包含全局安装的包，因此Grunt包和任务插件要求在本地安装Grunt，这样代码才能在不同设备中正常运行。
步骤二：在Gruntfilejs文件中加载插件
1
gruntloadNpmTasks('grunt-contrib-less');
步骤三：配置任务
1
2
3
4
5
6
7
8
9
gruntinitConfig({
less:{
compile:{
file:{
'build/css/compiledcss':'src/css/layoutcss'
}
}
}
});
步骤四：终端执行grunt less命令 建议明确指定任务的构建目标，本例中方式为grunt less：compile。此时在build/css文件夹里便生成了compiledcss。less对象还有其他的属性，你还可以添加一个compile_mobile目标，编译移动设备使用的css静态资源。
步骤五：精确通配模式
通配是一种文件路匹配机制，可以使用文件路径模式来包含或排除文件。下面列出一些有用的通配模式：
1
2
3
4
5
['public/less', //匹配public文件夹中拓展名为less的所有文件'public/less', //还能匹配public文件夹的子文件中的文件，
//而且嵌套层级多深
'!public/vendor//less //和第二个作用一样，不过！符号表明
// 要从结果中排除匹配的文件
]
有一点需要注意的是，不管多少个less文件，编译得到的css都只会打包到一个文件中。

---