Less几种使用方式

最新推荐文章于 2024-05-15 12:42:26 发布
最新推荐文章于 2024-05-15 12:42:26 发布
阅读量1w 收藏 5
点赞数 2
分类专栏： Web前端 Less 文章标签： Less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Super_LD/article/details/80517405
版权

在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 中加入相关配置代码，如下

  {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          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 lang="less">

@nice-blue:#5b83ad;

.page{

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 参数就可以了.
Super_LD
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Less语法-02-常用方式
Echo
01-22 390
1、使用Less进行像素/rem运算 Less文件：除法需要添加小括号 .container { width: 10 + 3rem; height: 10 - 3rem; inline-size: 10px * 2px; font-size: (10px / 5px); } 对应的CSS文件： .container { width: 13rem; height: 7rem; inline-size: 20px; font-size: 2px; } 2、使用
html如何调用less,浏览器端如何使用Less,需要的朋友可以参考下
weixin_33700809的博客
06-04 2899
之前项目用过Less，现在负责的项目也要使用，所以就总结下Less，也方便以后查看。本文主要是讲浏览器端如何使用Less。简介：LESS是一种由Alexis Sellier设计的动态层叠样式表语言。LESS 是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行(IE6+、Webkit、Firefo...
vue + less中引入自定义字体文件
winne雪
07-21 1154
项目以vue3 + vite 搭建的为例。注意路径问题。在合适的地方引入定义好的自定义字体。比如main.js、或者是大屏的入口index.vue中。如果是在main.js中引入，则直接使用。下面是在大屏的index.vue中引入：注意：必须要先引入自定义字体文件之后才能使用。.text {/* 字体名 */ font-size : 34px;
怎么在html中使用less语言,浏览器端如何使用Less
weixin_39799290的博客
05-31 987
之前项目用过Less，现在负责的项目也要使用，所以就总结下Less，也方便以后查看。本文主要是讲浏览器端如何使用Less。简介：LESS是一种由Alexis Sellier设计的动态层叠样式表语言。LESS 是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行(IE6+、Webkit、Firefo...
[前端|vue] ＜style scoped lang=“less“＞ 说明（笔记）
最新发布
梦醒贰零壹柒
05-15 169
元素添加唯一的类名前缀，从而实现样式隔离。这意味着组件内的样式不会影响到页面上的其他组件，这有助于避免样式冲突，特别是在大型项目中。用于限制样式的作用域，确保样式只影响当前组件内的元素。代码是用 Less 语法编写的。的作用是通过给组件内的。
lang=“less“的含义 scoped的含义
HuiDieDie的博客
03-11 1万+
类样式新敲法 敲再多后面也不会崩溃 <style lang="less" scoped> </style> 敲了它们有什么用 lang="less" 可以敲...
Less的几种使用方法
01-07
在Vue中使用Less 1、安装依赖 处理普通的.css 文件， 需要安装css-loader,style-loader 　.less 文件， 需要安装 less-loader npminstall css-loader style-loader –save-dev npminstall less-loader –save-dev 2...
微信小程序中用WebStorm使用LESS
08-31
在微信小程序中使用 WebStorm 和 LESS 主要有以下几个方面的优点： 首先，使用 LESS 可以减少代码的重复性和冗余性。在上面的示例代码中，我们可以看到有很多重复的地方，例如 background、position、animation 等...
几种api文档
11-17
标题中的“几种API文档”指的是不同编程语言或技术的接口文档集合，这些文档通常用于指导开发者如何使用特定的编程工具、库或者框架。在描述中提到了Java、HTML、DHTML、J2EE6和CSS这五种技术，接下来我们将分别深入...
使用less.modifyVars从jquery传递值到更少的变量
04-03
LESS是一种强大的CSS扩展语言，它允许开发者定义变量、嵌套规则和函数，提高了CSS的可维护性和可复用性。jQuery则是一个广泛使用的JavaScript库，简化了DOM操作和事件处理。 在描述中提到的问题，是关于在不同...
处理页面引入less资源
01-28
在前端开发过程中，LESS是一种流行的CSS预处理器，它允许我们使用变量、嵌套规则、混合、函数等特性来编写更简洁、可维护的CSS代码。本文将深入探讨如何处理HTML页面中直接引用的LESS资源，无需预先将其编译为CSS。 ...
html中使用less
SmallGirlYang的博客
11-28 964
说明：在网上看还有一种形式，是在vscode的扩展商店中安装插件Easy LESS，说是可以将less保存后实时编译为css文件，不过该种方式并未进行测试，不能确保可用性。说明：该种方式需要以服务的形式启动，在打开htm时使用less.js编译引用的less文件进行效果的渲染。本地使用less编译为css需要使用两个包。
Less入门
把全世界的花都给一个人
03-26 1942
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、Less是什么？二、使用步骤1.安装2.使用三、less的特点1.less可用用@关键字来定义变量2.嵌套3.运算4.转义5.内置函数6.引用与映射7.作用域8.注释9.导入 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Less是什么？ Les.
怎么在html中使用less语言,css中sass和less怎么使用？
weixin_36159799的博客
05-31 2060
sass和less是什么？怎么使用？下面本篇文章给大家简单介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。背景介绍CSS 是一门非程序式语言，没有变量、函数、SCOPE(作用域)，需要书写大量看似没有逻辑的代码，不方便维护及扩 展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前端开发的工作...
vue 使用 lang=“less“ lang=“scss“ 报错 less scss使用
热门推荐
weixin_43617604的博客
07-09 2万+
vue使用 less sass 安装及使用规范。
如何在html中使用less，亲测可用
qietuwang的博客
12-12 1287
以前在网页切图的时候，会觉得css如果能有变量 逻辑这些 会很方便，它来了，less.js插件可以使得css有类似变量的语法，它不是很新的技术，习惯用它的人会觉得很好用，而且它可以直接像jquery一样直接在网页上引用，也可以体验，不过仅仅适合体验，这种直接引用的方式不适合正式情况下用，因为页面js会有一个执行的时间，所以看起来会不流畅，可以在环境下开发，然后编译出来。当网页加载时，Less.js会将styles.less文件编译为CSS，并将其替换为标签的href属性中的CSS文件。
less的使用和特点
qq_62817378的博客
06-20 2430
关于less的使用
html如何调用less,LESS
weixin_34167684的博客
06-04 1638
LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！变量很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:#header { color: #...
怎么在html中使用less语言,Less.Html 示例五：使用方法详解
weixin_36436373的博客
05-31 1578
Less.Html 示例五：使用方法详解0. 从解析开始引入 Less.Html 的命名空间：using Less.Html;调用静态类型HtmlParser 的Parse 方法：Document document = HtmlParser.Parse(testHtml);返回的是 HTML DOM 标准的文档对象，我只实现了常见的 DOM 方法，其实 DOM 方法的设计本身就有繁复的地方，这...
css 使用less参数
08-15
### 回答1： 在 CSS 中使用 Less 可以为样式表提供更多的功能和灵活性，以下是使用 Less 的一些常见参数： 1. 变量：使用 @ 符号定义变量，例如：@primary-color: #007bff; 2. 嵌套规则：可以将选择器嵌套在另一个选择器内，例如： ``` .container { width: 100%; .content { margin: 0 auto; } } ``` 3. 混合（Mixins）：可以将一组样式定义为混合，然后在需要的地方引用，例如： ``` .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box { .border-radius(10px); } ``` 4. 函数：可以定义函数来处理样式值，例如： ``` .font-size(@size) { font-size: @size; line-height: @size * 1.5; } h1 { .font-size(24px); } ``` 5. 运算符：可以使用加、减、乘、除等数学运算符来计算样式值，例如：@width: (100% - 20px) * 2; 以上是一些常见的 Less 参数，可以让你更方便地编写 CSS 样式表。 ### 回答2： Less参数是一种用于CSS的预处理器，它允许开发人员在CSS中使用更便捷和灵活的方式来编写代码。Less参数的使用有以下几个方面。 首先，Less参数允许我们定义变量。通过在Less代码中定义变量，开发人员可以将常用的颜色、字体和尺寸等数值赋值给变量，以便在整个代码中重复使用。这一功能不仅节省了开发时间，还使得代码维护更加方便。例如，我们可以定义一个变量为@primary-color: #007bff，然后在需要使用这个颜色值的地方直接使用@primary-color。 其次，Less参数还支持嵌套规则。通过使用嵌套规则，我们可以将相关样式的代码组织在一起，使代码更加清晰和易读。例如，我们可以将所有列表项的样式放在一个ul的嵌套规则中，然后在该规则中定义li的样式。 另外，Less参数还支持混合(Mixins)和继承(Extend)。混合是将一组样式集合到一个类似函数的结构中，然后在需要使用这组样式的地方调用它。继承则是通过使用@extend关键字将一个选择器的样式继承到另一个选择器中。这两个功能都能减少代码的重复，提高代码的可重用性和可维护性。 最后，Less参数还提供了运算功能。开发人员可以使用加减乘除等运算符对数值进行运算，从而可以更灵活地控制样式中的值。例如，我们可以通过@base-font-size: 14px; @large-font-size: @base-font-size * 1.2;来定义一个大字号，该大字号是基础字号的1.2倍。 总之，Less参数为CSS的编写提供了更加灵活和便捷的方式。通过使用Less参数，我们可以更高效地编写和维护样式代码，提高开发效率。 ### 回答3： CSS 使用 LESS 参数可以使编写和维护样式表变得更加简洁和高效。LESS 是一种 CSS 预处理器，它在现有的 CSS 语法基础上添加了一些功能，让样式表更加灵活和易于管理。 其中，LESS 的参数功能主要有以下几个方面。 1. 变量：LESS 允许定义变量来存储各种样式值，然后在样式表中使用这些变量，以实现样式的复用和统一管理。通过使用变量，可以方便地修改整个项目的样式，提高开发效率。 2. 混合（Mixin）：LESS 允许定义一组样式，并将其命名为混合。可以在样式表中通过调用混合来重用这组样式。混合可以接受参数，使得样式更加灵活和可定制。 3. 嵌套：LESS 允许在样式声明中嵌套其他样式声明，以表示父子关系。这样可以使得样式表更加结构化和易读，减少样式的层级。 4. 运算：LESS 允许在样式声明中进行简单的数学运算，如加减乘除。这可以方便地计算出各种动态的样式值，如计算盒模型的宽度或高度。 通过使用这些参数功能，我们可以更加方便地编写和维护样式表，提高开发效率和代码的可读性。同时，LESS 参数功能也为样式的复用和定制提供了更多的可能性，使得样式的管理变得更加灵活和可控。因此，使用 LESS 参数可以极大地简化 CSS 编写的过程，并且有助于保持样式表的整洁和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值