css定义变量-变量较少

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在本节中，我们将学习 Less 中的变量。 很多编程语言都有变量的概念，不同语言定义变量的方法也不同。 例如，JavaScript 中可以通过 var 关键字来定义变量。

变量代表可以改变的值。 Less 中的变量可以帮助我们为重复定义的样式类或属性值赋予某些名称。 这是什么意思？ 请参阅下面的示例。

例子：

例如，在 CSS 代码中，某个颜色值 #f93d66 在多个地方使用：

.xkd{
  border: 1px solid #f93d66;
}
.xkd h3{
  background-color: #f93d66;
}
.xkd .circle{
  color: #f93d66;
}

如果使用Less语言来编写，如下：

@color: #f93d66;
.xkd{
   border: 1px solid @color;
   h3{
      background-color: @color;
   }
   .circle{
      color: @color;
   }
}

把这个颜色值赋给一个变量@color，然后使用的时候直接使用这个变量名。

这样做有什么好处呢？ 上面的代码可能不是很明显。 如果是在小项目中，同一个值可能会重复几十上百次。 如果我们后面想要改变颜色的话，一一改变就会很麻烦，但是使用变量的话，我们只需要改变这个变量的值，不需要改变多个地方，使得代码更容易维护。

可变句型

在Less语言中，我们可以使用@符号来定义变量，而变量赋值则使用逗号:来进行赋值。 请注意，逗号不是等号。

@变量名：变量值;

例子：

例如，下面的代码定义了一个变量@border：

@border:1px solid #ccc;
.xkd{
   font-size: 14px;
   border: @border;
}
.hava{
   border: @border;
}

编译成CSS代码：

.xkd {
  font-size: 14px;
  border: 1px solid #ccc;
}
.hava {
  border: 1px solid #ccc;
}

注意使用时变量名后面必须带有@符号。

变量的使用

Less语言中使用变量的主要方式如下：

公共变量

普通变量就是我们内部使用的变量。 定义形式通常为@变量名：变量值css定义变量，一般用于定义颜色值或字体大小。

例子：

@color: pink;
@radius : 5px;
.xkd{
  color: @color;
  border-radius: @radius;
}

编译成CSS代码：

.xkd {
  color: pink;
  border-radius: 5px;
}

选择器变量

变量可以将选择器变成动态选择器，还可以复用选择器中的重复字符。 使用选择器变量时，变量名称必须放在大括号 {} 内，并以 @ 符号为前缀。

例子：

下面是一段Less代码，定义了一个变量@name，其值为xkd_top。 使用时，需要将这个变量@name用大括号括起来：

@name: xkd_top;
.@{name} {
    font-size: 14px;
}
#@{name} {
    color: #aaa;
}
.div_@{name} {
    padding: 10px;
}

编译成CSS后css定义变量，输出为：

.xkd_top {
  font-size: 14px;
}
#xkd_top {
  color: #aaa;
}
.div_xkd_top {
  padding: 10px;
}

属性名称变量

属性名变量的使用看起来和选择器变量的使用类似，变量名用{}括起来。

例子：

比如定义font-size属性为属性名变量，那么只要用到这个属性，就可以用@{fz}来代替：

@fz:font-size;
h3{
    @{fz}:18px;
}
p{
    @{fz}:12px;
}

编译成CSS代码：

h3 {
  font-size: 18px;
}
p {
  font-size: 12px;
}

网址变量

文件的 URL 也可以作为变量使用。

例子：

例如，我们将地址放入变量中：

@xkd:"https://www.9xkd.com/";
.banner{
    background: url("@{xkd}/img.png");
}

编译为 CSS

.banner{
  background: url("https://www.9xkd.com//img.png");
}

总结

在实际应用中，我们通常将多个页面的通用样式放在一个单独的文件中。 声明变量也可以放在单独的文件中，这样有利于我们维护代码。