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;
}
相关推荐
一张假钞2 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行3 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758104 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周7 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队25 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js