在vue中使用less

依赖下载

// 下载 > npm install --save less less-loader // 检查版本 > lessc -v

使用

main.js

import less from 'less' Vue.use(less)

.vue

<style lang='less'> /*less内容*/ </style>

less用法

变量

值变量

以 @ 开头定义变量

<style lang='less'> @color: #ededed; .box { border: 1px solid @color; } </style>

选择器变量

以 @ 开头定义变量，变量名必须使用@{}调用

<style lang='less'> @wrap: wrap; @warp-id: #wrap; .@{warp}{ padding: 10px; } @{wrap-id}{ padding: 30px; } </style>

属性变量

以 @ 开头定义变量，变量名必须使用@{}调用

<style lang='less'> @color: #ededed; @borderTop: border-top; .box { @{borderTop}: 1px solid @color; } </style>

url变量

以 @ 开头定义变量，变量名必须使用@{}调用

<style lang='less'> @img: './assets/image'; .box { background: url('@{img}/logo.png'); } </style>

声明变量

结构: @name: {属性: 值;}; 使用: @name()

<style lang='less'> @border: {border: 1px solid #ededed;}; .box { @border(); } </style>

嵌套

&

<style lang='less'> .box { color: #ccc; &:hover { color: #999; } div { color: #333; } } </style>

混合方法

继承

函数