Less的强大变量用法

less中的变量应用十分强大,可以灵活的应用到各种不同需求的场景。

一,属性值变量

声明: sass声明变量是用$符号,而less声明变量是用@符号

作用域 :也区分为全局变量和局部变量,如果引用的变量有定义局部变量,则优先取局部变量。这里没有闭包的概念!

例如:

css 复制代码
@wd: 12px;
@bgColor: #ff005a;

.container {
    width: @wd;
    background-color: @bgColor; // 就近取局部变量#FFF
    @bgColor: #FFF; // 局部变量
}

二,属性名变量

声明:与属性值变量一致,使用@变量名。属性名定义变量可以大大减少代码量

引用 :@{变量名} - 需要用大括号包裹

示例

css 复制代码
// 定义属性名变量
@bdCol: background-color;

.main {
    @{bdCol}: #FFF; // 引用
}

// 编译后
.main {
    background-color: #FFF;
}

三,选择器变量

声明:声明方式与值变量类似,主要作用是让选择器变成动态

引用 :@{变量名}

示例

css 复制代码
// 定义选择器变量
@outDiv: #warp; // 变量直接定义id选择器
@innerDiv: main; // 变量定义选择器的名称

// 引用
@{outDiv} {
    width: 100%;
    margin: 20px;
}

.@{innerDiv} { // 引用选择器变量名称,并定义class选择器
    color: #fff;
}
#@{outDiv} {
    color: #333;
}

// 编译后
#warp {
    width: 100%;
    margin: 20px;
}

.main {
    color: #fff;
}

#warp {
    color: #333;
}

四,url变量

声明 :与普通值变量用法一致,但变量值要加引号。为图片等资源文件的url定义变量。

引用 :@{变量名}

示例

css 复制代码
// 定义url变量
@logo: "../assects/img";

.img {
    background: url("@{logo}/logo.png"); // 引用,通过大括号、字符串拼接
}

// 编译后
.img {
    background: url("../assects/img/logo.png");
}

五,同时声明变量名和变量值

声明 :@变量名: {属性名:属性值}。看上去像是封装一组声明好的变量和值,类似于mixin。

引用 :@变量名() - 后面加小括号

示例

css 复制代码
// 定义样式属性名和属性值的变量
@bgWhite: {background: #FFF;}
// 引用
.main {
    @bgWhite();
}
// 编译后
.main {
    background: #FFF;
}

// 定义一组样式的变量
@Rules {
    color: red;
    font-size: 12px;
}
// 引用
.container {
    @Rules();
}
// 编译后
.container {
    color: red;
    font-size: 12px;
}

六,变量运算

说明:less的变量支持简单的加减乘除算术运算。

使用方式:

加减运算以第一个值的单位为基准

乘除运算单位必须统一

示例

css 复制代码
@wd: 100px;
@color: #112233;

// 计算应用
.main {
    width: @wd + 20; // 120px
    .header {
        width: @wd - 10px * 2; // 80px
        font-size: 14px;
        color: @color*2; // #224466
    }
}

七,动态变量-用变量定义变量

说明:即动态定义要引用的变量名称

引用:还是通过@符号,但是引用变量的变量,需要两个@。

示例

css 复制代码
@wd: 100px;
@labelWd: "wd"; // 定义labelWd变量需要引用的变量名为wd

// 引用
.title {
    width: @@labelWd; // 即@wd > 100px;
}
相关推荐
小桥风满袖31 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心32 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~35 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒41 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师8 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js