首页常见问题正文

移动端页面布局:Less语法的格式

更新时间:2022-12-19 来源:黑马程序员 浏览量:

IT培训班

  CSS需要编写大量重复的样式属性值来实现页面的样式,如CSS中的一些颜色和数值等经常被使用。而通过less变量来实现CSS样式非常方便,且容易维护。下面讲解如何定义less变量,以及less变量的命名规范。

  less变量的语法格式如下。

@变量名:值;

  变量名需要遵循命名规范,具体如下。

  (1)必须以为前缀。

  (2)不能包含特殊字符。

  (3)不能以数字开头。

  (4)大小写敏感。

  例如,color是合法的变量名,而lcolor、color~#则是错误的变量名。由于变量名区分大小写,故color和Color是两个不同的变量。

  下面演示如何使用less变量来设置页面的背景颜色为粉色。

  (1)定义color变量,示例代码如下。

@color: pink;

  上述代码中,设置color变量的值为pink。

  (2)使用变量,示例代码如下。

body {
  color: @color;
}
a:hover {
  color: @color;
}

  需要注意的是,Less的代码应该书写到*.less文件中,而不是.css文件中。less的书写方式与CSS基本相似。在开发过程中,当同时修改body和a标签的样式时,只需要修改 color变量的值即可。

分享到:
在线咨询 我要报名
和我们在线交谈!