Less简明教程
2.1.1 普通变量
阅读(

Less 基础

Less 特性

变量

普通变量

对于程序开发人员来说,变量应该是最熟悉不过的概念了。如果多次重复使用一个信息,将它设置为一个变量,就可以在代码中重复引用。这不仅避免重复定义,还能使代码更容易维护。

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的变量特性。这样,就可以在不同项目间重用样式表,我们仅仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验