VUE style标签中添加lang=less属性

:ml-search-more[style lang="less"]是用于在HTML中启用Less预处理器的属性,允许直接在:ml-search-more[<style>标签]中编写Less代码并自动编译为CSS。

基本用法

在:ml-search-more[<style>标签]中添加lang="less"属性:

html

Copy Code

<style lang="less" scoped>

@color: red;

.box {

color: @color;

}

</style>

此代码会编译为标准CSS,@color变量会被替换为red。 ‌

注意事项

‌作用域‌:添加scoped属性时,Less变量和混合(mixin)的作用域会受限于当前组件,避免全局污染。 ‌

‌依赖安装‌:若项目未配置Less支持,需安装:ml-search-more[less-loader]和:ml-search-more[less]:

bash:

npm install less less-loader --save-dev

并在构建工具(如Webpack)中配置:ml-search-more[loader]规则。 ‌

‌兼容性‌:部分旧版框架可能需要额外配置(如:ml-search-more[Vue CLI]的:ml-search-more[style-resources-loader])。 ‌

示例:

<style lang="less">

@primary-color: #007bff;

.button {

background-color: @primary-color;

&:hover {

background-color: darken(@primary-color, 10%);

}

}

</style>

编译后:

css

Copy Code

.button {

background-color: #007bff;

}

.button:hover {

background-color: #0069d9;

}

``` ‌:ml-citation{ref="5,6" data="citationList"}

:::ml-data{name=citationList}

```json

{"source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793\&fm=195\&app=88\&f=JPEG?w=200\&h=200","name":"CSDN博客"},"isVideo":false,"title":"less的使用和特点","linkInfo":{"data-click-info":"{}","href":"https://blog.csdn.net/qq_62817378/article/details/125378689","target":"_blank","data-noblank":true,"data-show":"list","data-show-ext":"{\\"pos\\":\\"1\\",\\"component_content\\":{\\"component_name\\":\\"reference\\"}}"}},{"source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793\&fm=195\&app=88\&f=JPEG?w=200\&h=200","name":"CSDN博客"},"isVideo":false,"title":"Less CSS预处理器入门-CSDN博客","thumbnail":"http://t9.baidu.com/it/u=2435099762,3243391810\&fm=217\&app=126\&f=JPEG?w=360\&h=204\&s=6098EC3B0F4A7C4B5A7500DB030010B0","linkInfo":{"data-click-info":"{}","href":"https://blog.csdn.net/TeAmo__/article/details/123743623","target":"_blank","data-noblank":true,"data-show":"list","data-show-ext":"{\\"pos\\":\\"2\\",\\"component_content\\":{\\"component_name\\":\\"reference\\"}}"}},{"source":{"logo":"https://search-operate.cdn.bcebos.com/175c73f4973c6168ed6acae5b638fa15.png","name":"博客园"},"isVideo":false,"title":"36-关于style的属性Lang=\\"less\\"的问题","linkInfo":{"data-click-info":"{}","href":"https://www.cnblogs.com/morehair/p/15352901.html","target":"_blank","data-noblank":true,"data-show":"list","data-show-ext":"{\\"pos\\":\\"3\\",\\"component_content\\":{\\"component_name\\":\\"reference\\"}}"}},{"source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793\&fm=195\&app=88\&f=JPEG?w=200\&h=200","name":"CSDN博客"},"isVideo":false,"title":"如何声明使用less?","linkInfo":{"data-click-info":"{}","href":"https://blog.csdn.net/weixin_44708301/article/details/125378352","target":"_blank","data-noblank":true,"data-show":"list","data-show-ext":"{\\"pos\\":\\"4\\",\\"component_content\\":{\\"component_name\\":\\"reference\\"}}"}},{"source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793\&fm=195\&app=88\&f=JPEG?w=200\&h=200","name":"CSDN博客"},"isVideo":false,"title":"Less入门,超好用css写法","linkInfo":{"data-click-info":"{}","href":"https://blog.csdn.net/qq_44769099/article/details/123778546","target":"_blank","data-noblank":true,"data-show":"list","data-show-ext":"{\\"pos\\":\\"5\\",\\"component_content\\":{\\"component_name\\":\\"reference\\"}}"}},{"source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793\&fm=195\&app=88\&f=JPEG?w=200\&h=200","name":"CSDN博客"},"isVideo":false,"title":"Less CSS教程-CSDN博客","linkInfo":{"data-click-info":"{}","href":"https://blog.csdn.net/sigangjun/article/details/48441387","target":"_blank","data-noblank":true,"data-show":"list","data-show-ext":"{\\"pos\\":\\"6\\",\\"component_content\\":{\\"component_name\\":\\"reference\\"}}"}}

相关推荐
EnCi Zheng14 分钟前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
kyriewen18 分钟前
你的网页慢,用户不说直接走——前端性能监控教你“读心术”
前端·性能优化·监控
广州华水科技19 分钟前
北斗GNSS变形监测在大坝安全监测中的应用与优势分析
前端
前端老石人30 分钟前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
CAE虚拟与现实30 分钟前
五一假期闲来无事,来个前段、后端的说明吧
前端·后端·vtk·three.js·前后端
Sarvartha41 分钟前
三目运算符
linux·服务器·前端
晓晨的博客1 小时前
ROS1录制的bag包转换为ROS2格式
前端·chrome
Wect1 小时前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·typescript
donecoding1 小时前
别再让 pnpm 跟着 nvm 跑了!独立安装终极指南
前端·node.js·前端工程化
GISer_Jing1 小时前
AI全栈转型_TS后端学习路线
前端·人工智能·后端·学习