JZTXT

less-变量

发布时间 2023-09-15 12:37:39作者: Yancy00
@width: 100px; //定义变量
@default-border: 1px solid black;
// 变量名,变量值都可以被定义为变量

//变量名被定义为变量后,使用时需要加@{}引用
@bacc: background-color;
.box {
  width: @width;
  height: @width/2;
  @{bacc}: limegreen;
  border-radius: 4px;
  border: @default-border;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 32px;
  font-family: "Microsoft YaHei UI";
}

.box:hover {
  box-shadow: 2px 2px 10px darkgreen;
}