Less简介以及Less的几种使用方式
一、Less简介
官方网站：http://lesscss.cn/
Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。
Less可以运行在Node或浏览器端。也可运行在桌面客户端。
二、在Vue中使用Less
1、安装依赖
处理普通的.css 文件， 需要安装css-loader,style-loader
.less 文件， 需要安装 less-loader
//.sass 文件，需安装 sass-loader
npminstall css-loader style-loader --save-dev
npminstall less-loader --save-dev
//npminstall scss-loader --save-dev
2、安装好相关loader后，我们需要在webpack.base.conf.js或者webpack.config.js 中加入相关配置代码，如下
{undefined
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {undefined
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test:/\.less$/,
use:[
"style-loader","css-loader","less-loader"
]
}
或者
{
test: /\.less$/,
loader:"style!css!less"
}
3、在style中加入lang="less"即可使用less
<stylescoped>
@nice-blue:#5b83ad;
.page{undefined
width: 200px;
height: 200px;
display: flex;
background: @nice-blue;
}
</style>
三、在客户端使用
引入你的 .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 参数就可以了.
本文链接：https://www.looit.cn/news/details-12-784.html
版权声明：
1：本站所有内容均由互联网收集整理、上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途，如描述有误或者学术不对之处欢迎及时提出，不甚感谢。
2、 如涉及版权问题，请联系我们4724325@qq.com第一时间处理；
我们从以下三个方面，对比纯静态和伪静态两种静态页面生成方式，逐一展开分析。
用JS的正则表达式如何判断输入框内为中文或者是英文数字，或者是三者混编
css制作扇形
纯CSS3文字Loading动画特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和属性中添加了对多行和嵌套数组形状的完全支持：在这种情况下，可以使用数组形状注释定义数组结构，以获得键的代码补全并推断值的类型。
PHP作为Web界第一大语言近年来热度不够，但是这几年的进步和成长却没有中断。在2022伊始，我们来一起学习一下目前PHP的现状以及最新版本带来的特性。
Linux程序前台后台切换：在Linux终端运行命令的时候，在命令末尾加上 & 符号，就可以让程序在后台运行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正则表达式支持 多行模式，将每行文字分别匹配。然而各种操作系统里，换行符的表示法各不相同，会导致 Python 不能正确使用多行模式。