Less变量
定义变量
Less 中的变量和其他编程语言一样,可以实现值的复用,同样它也有作用域(scope)。简单的讲,变量作用域就是局部变量和全局变量的概念。
Less 中,变量作用域采用的是就近原则,换句话说,就是先查找自己有没有这个变量,如果有,就取自己的变量,如果没有,就查找父元素,依此类推。先看一个简单的例子,Less 文件如下:
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv {
width : @width; // 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}
编译后的CSS代码为:
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
对于程序开发人员来说,变量应该是最熟悉不过的概念了。如果多次重复使用一个信息,将它设置为一个变量,就可以在代码中重复引用。这不仅避免重复定义,还能使代码更容易维护。
Less中,变量由变量名称和值组成。变量名以 @ 为前缀,由字母、数字、_和-组成,变量名称和值之间用冒号隔开。如:
/* 定义变量 */
@color: #4d926f;
/* 应用到元素中 */
header {
color: @color;
}
h2 {
color: @color;
}
上面的代码定义了一个变量 @color,并给它赋值为 #4d926f。然后,就可以在选择器 header 和 h2 中反复使用它,而不必重复定义。编译后的CSS代码为:
header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
从上面的代码可以看出,变量是 VALUE(值)级别的复用,可以将相同的值定义成变量,来统一管理起来。当需要调整样式时,只需要修改相应变量的值就可以了,非常方便。因此,变量适用于定义主题,可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,不同的主题只需要定义不同的变量文件就可以了。
当然,变量也同样适用于 CSS RESET(重置样式表),在 Web 开发中,往往需要屏蔽浏览器的默认样式,就可以使用 Less的变量特性。这样,就可以在不同项目间重用样式表,我们仅仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。
不仅可以直接在属性值中使用变量,还可以用类似 @{name} 的结构,以“插值”的方式在选择器名、属性名、URL、import、媒体查询中使用变量。在编译时,变量将被替换为它们相应的值。