Less 变量

上篇文章介绍了什么是 less。根据上篇文章的介绍,了解到 less 只是一种 css 预编译器,它需要通过编译软件对它进行编译之后生成需要的 css,文件。本文介绍如何正确的使用 less。

考拉

首先来讲 less 编译工具:考拉。

考拉是国人开发的一个全平台的 less 的编译软件编译工具,它的网址是 http://koala-app.com/

less 变量

学习变量它nice的变量这样一个概念。那么这节课主要有这么5个知识点,大家需要。

1. 普通的变量

在 less 中,使用 @ 来定义变量:

less 复制代码
@blue: #5B83AD;

#header {
    color: @blue;
}

这里需要注意一下,所谓的变量实际上只是字符串层面的替换而已,所以其实是常量。

2. 选择器和属性名中使用变量

在选择器和属性名中使用变量和将变量作为值不同;这种情况下需要用到@{}的格式。

less 复制代码
@mySelector: width;
.@{mySelector} {
    @{mySelector}: 960px;
    height: 500px;
}

上述 less 代码在编译之后等价于:

css 复制代码
.width {
    width: 960px;
    height: 500px;
}

3. URL 中的变量

一般来说,在 css 中, URL 基本上都是以下面的这种方式使用的:

css 复制代码
body {
    background-image: url("http://example.com/images/1");
}

而在 less 中,可以使用变量替换 http://example.com 这部分,如下所示:

less 复制代码
@baseURL: http://example.com;
body {
    background-image: url("@{baseURL}/images/1");
}

4. 延迟加载

所谓延迟加载,你可以将其等效成 js 中函数的提升,也就是说:无论变量定义在哪里,在编译的时候总是会提升到作用域的最上方,因此下面两种写法是等效的:

less 复制代码
@a: 9%;
@var: @a;

.lazy {
    width: @var;
}

等效于:

less 复制代码
.lazy {
    width: @var;
}

@var: @a;
@a: 9%;

5. 变量的作用域

如果在同一个定义域定义了相同的 less 变量,那么通过提升作用可以知道,后定义的会覆盖先定义的值。而在不同定义域下定义的同名变量,采用的是就近原则生效。

less 复制代码
@var: 0;
.class {
    @var: 1;
    .brass {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

经过提升之后最内侧的 @var: 3;覆盖了@var: 2;的值;最终结果为:

css 复制代码
.class {
    .brass {
        three: 3;
    }
    one: 1;
}
相关推荐
xingyunstt5 天前
SQL在数据分析中的关键应用与优化技巧
less
By北阳9 天前
Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.
前端·elasticsearch·less
wyzqhhhh13 天前
less和sass
前端·less·sass
幸运小圣21 天前
Sass和Less的区别【前端】
前端·less·sass
BillKu1 个月前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
@八度余温1 个月前
预处理器Sass/Scss、Less 的区别,项目中写法
less·sass·scss
惜分飞2 个月前
ORA-600 kcratr_nab_less_than_odr和ORA-600 2662故障处理---惜分飞
前端·css·less
车厘小团子2 个月前
🎨 前端多主题最佳实践:用 Less Map + generate-css 打造自动化主题系统
前端·架构·less
一枚前端小能手2 个月前
💎 Less/Sass写出优雅代码的4个高级技巧
css·less
盛夏绽放2 个月前
原生CSS vs LESS:样式表语言的进化之旅
css·tensorflow·less