普通的变量
Css默认不支持变量,当我们使用less之后就可以使用。
其定义方式是 @变量名:值 ,如下,我们定义一个变量green,设置一个颜色green,然后将网页背景设置为绿色:
@green: #801f77;
header {
background: @green;
}
注意:由于变量只能定义一次,实际上他们就是“常量”
作为选择器和属性名
使用时将变量以@{变量名}的方式使用,使用例子如下:
作为选择器和属性名的变量
@kuandu:width;
.@{kuandu}{
@{kuandu}:150px
}
注意:这里的变量即使选择器又是属性名,不能写错。
作为URL
使用时,使用””将变量的值括起来,使用时同样将变量以@{变量名}的方式使用。使用例子如下:
//作为URL的变量
@imgurl:"https://www.baidu.com/img/";
header{
background: @green url("@{imgurl}bdlogo.png");
height: 500px;
}
延迟加载
延迟加载:变量是延迟加载的,在使用前不一定要预先说明。
意思是指:在前面使用了这个变量,但没有定义,但可以在后面给他定义出来,不影响输出。
定义多个相同名称的变量时
在定义一个变量两次时,只会使用最后定义的变量,Less会从当前作用域向上搜索。这个行为类似于css的定义中始终使用最后定义的属性值。使用实例如下:
//定义多个相同名称的变量时
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var; //这是的值是3
@var: 3;
}
one: @var; //这是的值是1
}
文章来源:麦子学院
<!--EndFragment-->
相关推荐
主要介绍了详解vue项目中如何引入全局sass/less变量、function、mixin,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
此工程是在b站学习了尚硅谷less教学视频后的语法小结。在此作为一种分享与个人的记录。 关键字:less变量的常见用途,less的混合,less的继承,避免编译less,使用less进行加减乘除。
作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS...变量: 变量的作用就是把值定义在一个地方,然后在各处使用,这样能让代码更易维护,如下: 复制代码代码如下:// Variables@link-c
为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 “sass-resources-loader” 解析器。 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli ...
声明变量或者用户变量 可以参考分区不支持的SQL函数 算术和逻辑运算符 分区表达式支持+,-,*算术运算,但是不支持DIV和/运算(还存在,可以查看Bug #30188, Bug #33182)。但是,结果必须是整形或者NULL(线性分区键...
入门学习Linux常用必会60个命令实例详解 Linux必学的60个命令 Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作、文件存取、目录操作、进程管理、文件权限设定等。所以,在Linux系统上工作离不...
这小节我们要介绍Go里面的流程控制以及函数操作。 流程控制 流程控制在编程语言中是最伟大的发明了,因为有了它,你可以通过很简单的流程描述来表达很复杂的逻辑。... fmt.Println(“x is less than 10”) } Go的if还
微信小程序 Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序 Mustache语法。 小程序开发的wxml里,用到了Mustache语法。所以,非常有必要把Mustache研究下...
二、Sass(基于SCSS语法)详解1. CSS功能拓展(1). 嵌套规则(2). 父选择器&(3). 属性嵌套(4). 占位选择器%foo(5). 注释2. SassScript(1). 变量(2). 数据类型(3). 运算数字运算颜色值运算字符串运算布尔运算(4). 函数...
目 录 一、Linux基础 5 1.什么是Linux? 5 2.什么是自由软件、GNU和GPL? 5 3.从技术上说,Linux有什么优点? 5 4.我需要学习Linux吗?...十五、Linux操作系统中备份恢复技术的详解 129 十六、GRUB使用说明 131
zabbix用户宏变量详解用户宏变量详解macromacro...............................................................................................................................................................