Less定义变量

Posted 2022-06-26 xiaozhang666

1. 定义：

使用 @ 符号来定义变量 ，在Less中开头是 @ 则是变量，关于变量的命名方法，大家可以参考js中命名的规则，毕竟是做前端的，有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写，从第二个开始，单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……，当然也是可是使用香肠命名法用下划线“_”来命名。如，box_main,border_bottom,……

2. 使用：

在样式属性值中使用时，直接用 @variable 即可调用变量；

在其他地方，包括选择器名称、属性名称、URL和@import语句使用时，变量必须以插值的形式使用，例如：

@variable: 200px; //定义变量作为样式属性值使用
@classname: .nav_a; //变量值不可用中划线，此变量作为插值用于选择器名称


@classname //作为插值 必须加 
    width: @variable; //作为属性值直接调用

输出：

.nav_a 
  width: 200px;